<router-link :to="/home" replace></router-link>

<router-link :to="/home" tag="li">Home</router-link>

<!-- 渲染结果 -->

<li>Home</li>

<router-link :to="/home" active-class="u-link--Active">Home</router-link>

<router-link :to="/" exact>home</router-link>

HTML：
<router-link to="/one">路由</router-link>
<router-view></router-view> 
router.js:
定义路由：

　main.js: 　在main.js中需要通过router配置参数注入路由

1.<router-link :to="{name: 'dynamicOne', params: {id:222, name: 'gmn'}}">动态路由传参形式1</router-link>

2.<router-link :to="{path:'dynamicTwo/567', query: {name: 'gmn'}}">动态路由传递多个参数, 通过query传递参数</router-link>

3.<router-link :to="{name: 'dynamicOne', params: {id:222,name:'gmn'}, query: {age: 18}}">动态路由params和query组合传参的</router-link>

4.<router-link :to="{path:'/dynamicTwo/567?a=1'}">在path中添加?表示，传递的参数</router-link>

对应的定义路由的形式：

  {

      path: '/dynamicOne/:id/:name',

      name: 'dynamicOne',

      component: dynamicOne

    },

　　{

      path: '/dynamicTwo/:uid?', //“？”

      name: 'dynamicTwo',

      component: dynamicTwo

    },

params和query在路由的跳转上，都可以用来传递参数，那么。params和query的区别的区别是什么呢？

params和query的区别：

1》二者的认识

params:  /router1/:id，/router1/123这里的id叫做params

query： /router1?id=123, 这里的id叫做query

2》 传参

params传参，要在路由的后面加上参数名，并且在传参的时候，参数名要跟路由后面设置的参数名对应。

query传参，则没有这个限制，直接在跳转里面传递参数就行，不需要在路由的后面加上对应的参数。

params是路由的一部分,必须要有。query是拼接在url后面的参数，没有也没关系。

3》地址栏中的区别

params传参在地址栏中不显示，query传参在地址栏中可见的。

params:

query:

知识点：：：

如果路由上面不写参数，也可以传递过去，但是不会在url上显示你的参数，并且在跳转别的页面或者刷新的时候，参数就会丢失。打印结果如下：：

未刷新前：

刷新后：丢失name

3.嵌套路由（又称为子路由）

就是我们在原路由的基础上增加一个children，children是一个数组，并且我们还需要在原来的组件上添加<router-view>来渲染children里面的路由。

以“/”开头的嵌套路径会被当作根路径，所以子路由上不用加“/”;

在生成路由时，主路由上的path会被自动添加到子路由之前，所以子路由上的path不用在重新声明主路由上的path了。

 // 嵌套路由

    {

      path: '/father',

      name: 'father',

      component: father,

      children: [{

        path: '/father/children',

        component: children

      },

      {

        path: '/father/childrenTwo',

        component: childrenTwo

      }]

    },

4.编程式导航

在前面介绍通过router-link标签来进行导航，还有一种方式进行导航，即是编程式导航。

就是通过写js代码来实现页面的跳转

即通过router实例的方法，进行编写。router.push('/a')；

1>router.push  此方法将新条目推送到历史堆栈中，点击浏览器中回退安钮时，就会回退到之前的URL;

2>router.replace此方法替换了当前的URL,与router.push的区别就是它导航而不推送到新的历史条目。

3>router.go(n)此方法采用单个整数作为参数，指示在历史堆栈中前进或后退的步数。整数表示前进，负数表示后退

      // 编程式路由

      route.push('/one')

      // 编程式路由传参params

      route.push({name: 'dynamicOne', params: {id:}})

      // 编程式路由传参query

      route.push({name: 'dynamicTwo', params: {uid:''}, query: {name:'gmn'}})

5.命名路由

给路由定义不同的名字，根据名字进行匹配。给不同的router-view定义名字，router-link通过名字进行对应组件的渲染。通过“name”表示路由的名字。

<router-link :to="{name: 'dynamicOne', params: {id:222,name:'gmn'}}">动态路由传参params</router-link>

    {

      path: '/dynamicOne/:id/:name',

      name: 'dynamicOne', //命名路由

      component: dynamicOne

    },

6.命名视图

给不同的router-view定义不同的名字，通过名字进行对应组件的渲染。意义在于在界面中拥有多个单独命名的视图，而不是只有一个单独的出口。如果router-view灭有设置名字，那么默认为default。

<router-view/>

<router-view name="view"></router-view>

<router-view name="viewTwo"></router-view>

// 同级视图

    {

      path: '/view',

      components: {

        default: one,

        view: view,

        viewTwo: viewTwo

      }

    },

7.重定向和别名

重定向的意思是：重新定义路由的跳转，比如，默认是跳转到  ‘/a’，重定向到 ‘ /b’,意思就是 跳转到a 的时候 直接跳转到b。

重定向的目标可以是一个命名的路由。也可以是 动态返回重定向目标。

<router-link :to="{name:'/two', params: {id: '111'}}">

 重定向传参

 </router-link>

   // 重定向,别名

    {

      path: '/two',

      // redirect: '/father',

      // redirect: {name: 'father'}, // name

      // redirect: '/dynamicOne/:id', //传参

      redirect: to => {

        return '/father' //动态重定向

      },

      name: '/two',

      component: two,

    }

别名：就是 相当于 给路由起的 小名儿，

“别名”的功能让你可以*地将 UI 结构映射到任意的 URL，而不是受限于配置的嵌套由。用alias属性表示

<router-link to="/na">别名</router-link>

{

      path: '/two',

      component: two,

      alias: '/na'

    }

8.History模式

vue-router默认Hash模式，使用URL的hash来模拟一个完整的URL，URL改变，页面不会重新加载。但是正常情况下来说，当url改变，页面是一定会更换的。只有更换url中的查询字符串和hash值得时候才不会重新加载页面。例如

但是这种#形式不美丽，也为了解决 更改地址后页面重新渲染的页面的问题，所有就有了history模式的出现，

改变后的路径：就看着 很美丽了。

但是

这种模式需要后台配置的支持。因为我们的应用是个单页客户端应用，如果后台没有正确的配置，当用户在浏览器直接访问 http://oursite.com/user/id 就会返回 404，这就不好看了。

9.路由元： meta字段。用来携带一些隐藏信息，比如判断是否登录

{

      path: '/one',

      name: 'one',

      component: one,

      meta: {require: true}

}

使用，在one.vue中this.$route中查到这个字段，具体如下：

10.路由懒加载：

什么是懒加载呢？懒加载也叫做延迟加载，即在需要的时候进行加载，随用随载。

为什么需要懒加载呢？当打包构建应用时，Javascript 包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了。

结合 Vue 的异步组件和 Webpack 的代码分割功能，轻松实现路由组件的懒加载。

const one = () => import('@/components/One')

{

      path: '/one',

      name: 'one',

      component: one,

      meta: {require: true}

},

11.路由的生命周期

全局守卫： 1.router.beforeEach:全局前置守卫，进入路由之前。2,。router.beforeResolve:全局解析守卫，在beforeRouterEnter调用之后调用。3.router.afterEach 全局后置钩子 进入路由之后

1>全局前置守卫::::::当一个导航触发时，全局前置守卫按照创建顺序调用。守卫是异步解析执行，此时导航在所有守卫 resolve 完之前一直处于 等待中。

有三个参数：

const router = new VueRouter({ ... })

router.beforeEach((to, from, next) => {

  if(to.name == "one"){

    next();

  }

  else if(to.path != "/"){

    next("/");

  }

  else{

    next();

  }

})

2>全局解析守卫：：：： 和router.beforeEach()类似，区别是在导航被确认之前，同时在所有组件内守卫和异步路由组件被解析之后，解析守卫就被调用。

3>全局后置钩子：这个没有next函数

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

  // ...

})

4>路由独享的守卫 ：就是在路由配置上直接定义beforeEnter守卫

const router = new VueRouter({

  routes: [

    {

      path: '/foo',

      component: Foo,

      beforeEnter: (to, from, next) => {

        // ...

      }

    }

  ]

})

5.组件内的守卫： 在路由组件中直接定义以下路由导航守卫。

beforeRouteEnter： 在渲染该组件的对应路由被confirm前调用， 不能获取组件实例this,因为当守卫执行前，组件实例还没被创建。

beforeRouteUpdate ：在当路由改变，但是该组件被复用时调用，比如在动态路由中，在one/1, one/2之间转换的时候，由于会渲染同样的one组件，因此，组件实例会被复用，而这个钩子就会在这种情况下调用，可以访问this

beforeRouteLeave：导航离开该组件对应的路由时调用，可以访问this。

6.整个路由守卫被触发流程的步骤：