vue-路由基础

• router-link和router-view组件

  <template>
     <div id="app">
         <div id="nav">
             <router-link to="/">Home</router-link> |
             <router-link to="/about">About</router-link>
       </div>
       <router-view/>
   </div>
  </template>
  

• 路由配置

a.动态路由

 {
   // 动态路由
  path: '/argu/:name',
  component: () => import('@/views/argu.vue')
}
// argu.vue
<template>
  <div>
      hello {{ $route.params.name }}
  </div>
</template>   

b.嵌套路由

{
    // 嵌套路由
    path:   '/parent',
    component: () => import('@/views/parent.vue'),
    children: [
        {
            path: 'child',
            component: () => import('@/views/child.vue')
        }
    ]
},

// parent.vue
<template>
  <div>
        I am parent
        <router-view :to="{name: 'child'}"/>
  </div>
</template>

c.命名路由

 <router-view name="email"/>

d. 命名视图
注意是使用components

{
    path: '/name_view',
    components: {
        default: () => import('@/views/Home.vue'),
        email: () => import('@/views/email.vue'),
        tel: () => import('@/views/tel.vue')
    }
}
//使用
<template>
   <div id="app">
      <div id="nav">
        <router-link :to="{name: 'home'}">Home</router-link> |
        <router-link v-bind:to="{name: 'about'}">About</router-link>
      </div>
      <router-view />  //这个不能少
      <router-view name="email"/>
      <router-view name="tel"/>
  </div>
</template>

• JS操作路由

  路由实例 this.$router
  前进一页 this.$router.go(1)
  后退一页 this.$router.go(-1)  或者 this.$router.back()
  // 页面传参
  this.$router.push({
        name: 'argu',
        params: {
                name: 'jack'
            }
        })
  //或者
  const name = 'jack'
  this.$router.push({
            path: `/argu/${name}`  注意是 ` 符号不是单引号
  })
  

• 重定向

  //第一种写法（直接跳转）
  {
    path: '/main',
    redirect: '/'
  }
   //第二种写法(命名路由)
  {
    path: '/main',
    redirect: {
              name: 'home'
          }
  }
   //第三种写法(方法返回)
  {
    path: '/main',
    redirect: to => {
             return  '/'
          }
  }
  

• 别名

  {
    path: '/',
    name: 'home',
    alias: '/home_page',  //利用别名访问
    component: Home
  },