VUE NOTE————路由

一、

后端渲染： 服务器从数据库获取数据后，后端填充数据，将数据加载进来生成HTML，然后传到浏览器中解析成页面。
前端渲染： 后端不提供完整的HTML页面，而是提供一些API，使前端可以获取到JSON数据，前端拿到JSON数据后HTML页面，然后展示在浏览器上。
区别在于： 数据填充。
即由谁来完成HTML文件的完整拼接，如果是在后端完成的，直接填充到HTML后传给前端，然后返回给客户端，就是后端渲染；
若是前端完成了HTML的拼接，通过ajax从后台拿数据进行操作，就是前端渲染

后端路由： 由服务器来处理Url和页面之间的映射关系
前端路由： URL 变化引起 UI 更新，页面无刷新，由前端来维护路由规则
SPA是只有一张Web页面的应用，加载单个HTML页面,并在用户交互时动态更新。

二、

history.pushState({},'','home') // 通过压栈 修改url
history.back() // 通过出栈修改url
history.replaceState({},'','home')
以下方法相当于浏览器界面的前进、后退
history.go(-1) // 相当于 history.back()
history.go(1) // 相当于 history.forward()
history.go(2) // 压入2个

三、

1.安装vue-router
npm i vue-router –save
2.在模块化工程中使用

第一步：导入路由对象，
import Vue from 'vue';
import VueRouter from 'vue-router';
并调用 Vue.use(VueRouter)
tip: 插件需要通过Vue.use()去安装

第二步：创建路由实例，并传入路由的映射配置
映射关系：

1
2
3
4
5
6
7
8
9
10

const routes = [
  {
    path: '/home',
    component:Home
  },
  {
    path: '/about',
    component:About
  }
]

创建路由实例

1
2
3
4
5
6
7
8

const router = new VueRouter({
  // 传入配置路由与组件之间的映射关系
  routes,
  // 将默认的hash模式改为history模式
  mode:'history',
  // 选中的router-link的类名
  linkActiveClass:'active'   
})

导出： export default router

第三步：在Vue实例中挂载创建的路由实例

挂载：

1
2
3
4

new Vue({
  el:'#app',
  router,
}) 

使用：

1
2
3

<router-link to="/home"></router-link>
<router-link to="/about"></router-link>
<router-view></router-view>

tip:
router-link最终会被渲染成<a/>
router-view 相当于占位，根据当前url渲染不同组件

3.
路由的默认路径：

1
2
3
4

{
  path:'',
  redirect:'/home'
}

4.
router-link的补充

1. to属性
2. tag属性

   1 2 3

   <router-link to="/home" tag="button" replace active-class="active"> 首页 <router-link/>

   tag: 渲染成其他标签 eg: button
   replace: 浏览器上的前进后退按钮disable

5.路由的代码跳转
<button @click="homeClick">首页

1
2
3
4
5
6
7

methods: {
  homeClick(){
  this.$router.push('/home');
  // replaceState
  this.$router.replace('/home');
  }
}

6.动态路由
在路由映射中：

1
2
3
4
5
6

{
    path:'/user/:abc',
    component:User
}

• 动态绑定用户ID
  <router-link :to="'/user/'+userId"></router-link>

1
2
3
4
5

data() {
    return {
        userId: 'userLee',
    }
}

• 在子组件中获取路由参数
  user组件中：
  <h2>{{userId}}</h2>

computed:{
    userId() {
        // $route表示获取当前处于活跃状态的路由 
        // abc 为配置映射表时定义的path
        return this.$route.params.abc;
    }
}

7.路由的懒加载

npm run build

默认将js打包为三个文件：

• app 自己写的业务代码
• manifest 做底层支撑
• vendor 第三方提供商

打包构建应用时，js包可能会非常大，影响页面加载
更加高效的做法是： 把不同路由对应的组件分割成不同的代码块，当路由被访问时才加载相应组件

懒加载的方式

{
    path:'/home',
    component:() => import('../components/Home')
}

或者

const Home = () => import('../components/Home')

{
    path: '/home',
    component: Home
}

通过路由懒加载，打包完的js会根据不同组件，进行分包。

8.嵌套路由
实现路由嵌套：

1. 创建子组件，在路由映射中配置对应的子路由
2. 在组件内部使用<router-view>

eg.

在home.vue中

<router-link to="/home/news">新闻</router-link>
<router-link to="/home/msg">信息</router-link>
<router-view></router-view>

在配置路由映射中

const routes = [
    {
        path:'/home',
        component: Home,
        children: [
            {
                // 嵌套路由的默认路径
                path:'',
                redirect:'news'
            }
            {
                path:'news',
                component:HomeNews 
            },
            {
                path:'msg',
                component:HomeMsg
            }
        ]
    }
]

9.路由之间的参数传递
a.传递参数的方式: params和query

• params
  配置路由格式: /user/:id
  传递方式： 在path后面跟上对应值
  传参后形成的路径： /user/1
• query
  配置路由格式： /user
  传递方式： 使用query的key
  传参后形成的路径： /user?id=1

query eg.
localhost:8080/profile?name=apple&price=10

在profile组件中：

<h1>{{$route.query.name}}</h1>
<h1>{{$route.query.price}}</h1>

在app.vue中：

<router-link :to="{path:'/profile', query:{name: 'apple', price:10}}">
</router-link>
<router-view></router-view>

b.通过代码跳转并传参

<button @click="clickProfile()"></button>

methods: {
    clickProfile() {
        this.$router.push({
            path:'/profile',
            query: {
                name: apple,
                price: 10
            }
        });
    }
}

10.$route和$router的区别
$route是当前处于活跃状态的路由。每个对象都是局部的，可以获取当前路由的 path, name, params, query等属性。

$router是全局的 router 实例。在vue根实例中注入 router 实例，再注入到每个子组件，任何页面都可调用 pushSate(), replace(), go() 等方法。

11.导航守卫
全局导航守卫： 监听路由跳转
例如根据路由改变网页标题
在配置路由映射中：

{
    path:'/home',
    component:Home,
    meta: {
        title:'首页'
    },
    children:[
    ]
}

在index.js中

router.beforeEach((to, from, next) => {
    document.title = to.meta.title;
    next();
})

beforeEach()又称前置守卫，next()必须调用
next({path: ‘/login’})
next(false) 中断当前导航

导航守卫补充

后置钩子afterEach() 不需要调用next()

router.afterEach((to,from) => {

})

beforeEach() 和 afterEach()是全局守卫

12.路由独享的守卫

routes: [
    {
        path:'/home',
        component: Home,
        beforeEnter:(to, from, next)=> {

        }
    }
]

13.组件内守卫

const cpn = {
    template:...,
    beforeRouteEnter(to,from,next) => {},
    beforeRouteUpdate(to,from,next) => {},
    beforeRouteLeave(to,from,next) => {}
}

14.keep-alive
a.
keep-alive是Vue内置的组件
lifecycle:
created(){}
destroyed(){}

以下两个函数只有使用了keep-alive包裹起来时才有效
keep-alive作用： 该组件保持状态,不要销毁，避免重新渲染
activated(){}
deactivated(){}

<keep-alive><router-view/></keep-alive>

b.keep-alive 的属性

• include
  字符串或正则表达式，只有匹配的组件才会被缓存
  eg.

  <keep-alive include="User"><router-view/></keep-alive>

• exclude
  字符串或正则表达式，只有不匹配的组件才会被缓存

  <keep-alive exclude="User,About"><router-view/></keep-alive>

  tip：两个组件之间逗号连接 ，不要加空格