vue 路由介绍新手入门到高级篇-路由跳转的几种形式，子路由，以及路由守卫

路由的基本跳转的几种方法

路由配置的js：
如下：

export default new Router({
  // mode: 'history',
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld,
    },
    {
      path:'/hao',
      name:'hao',
      component: Hao,
    }
  ]
})

写在router-link上的有：

<router-link to="hao">点我跳到hao组件</router-link>

// 没传参
<router-link :to="{name:hao}">点我跳到hao组件</router-link>

//params传参
<router-link :to="{name:hao，params:{id:1}}">点我跳到hao组件</router-link>
<router-link :to="{path:hao，params:{id:1}}">点我跳到hao组件</router-link>

//接收传的该参数，只需要用
this.$route.params.id

//juery传参
<router-link :to="{name:hao，juery:{id:1}}">点我跳到hao组件</router-link>
<router-link :to="{path:hao，juery:{id:1}}">点我跳到hao组件</router-link>

//接收传的该参数，只需要用
this.$route.juery.id  //此时地址栏为为127.0.0.1:3000/#/hao?id=1

写在事件上的有：

this.$router.push('hao')

this.$router.push({path:'hao'})

this.$router.push({name: hao})

//params传参
this.$router.push({name: hao, params: {id: 1})
this.$router.push({path: hao, params: {id: 1})

//juery传参
this.$router.push({name: hao, juery: {id: 1})
this.$router.push({path: hao, juery: {id: 1})

子路由的使用

路由配置的js：
如下：

export default new Router({
  // mode: 'history',
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld,
    },
    {
      path:'/hao',
      name:'hao',
      component: Hao,
      children: [
        {
          path: 'hen',
     	  name:'hen',
          component: Hen 
        }
      ]
    }
  ]
})

由于hen是hao的子路由，只需要在hao的template模板标签下面添加<router-view />标签，
点击即可显示hen组件里面的内容

路由通配符 *

作用一：
用于用户访问了没有配置的路由，显示的404组件。

路由守卫介绍及其用法

https://router.vuejs.org/zh/guide/advanced/navigation-guards.html