路由详解(一)——基础:

1. router-link和router-view组件

    <div id="app">
       <div id="nav">
         <router-link to="/">Home</router-link> |
         <router-link to="/about">About</router-link>
       </div>
       <router-view/> //路由出口
     </div>
   

2. 路由配置

   a.动态路由

   argu.vue

   <template>
   	<div>
   		{{$route.params.name}}
   	</div>
   </template>
   <script>
   export default {
     //
   }
   </script>
   <style lang="">
   
   </style>
   
   

   router.js

   import Home from ‘@/views/Home‘
   // 每一个路由要包含基本的两个属性:path component
   export default [
     {
       path: ‘/‘,
       name: ‘home‘,
       component: Home
     },
     {
       path: ‘/about‘,
       name: ‘about‘,
       // route level code-splitting
       // this generates a separate chunk (about.[hash].js) for this route
       // which is lazy-loaded when the route is visited.
       // 懒加载,只有当访问到该路由的时候，该组件才会加载
       component: () => import(/* webpackChunkName: "about" */ ‘../views/About.vue‘)
     },
     // 动态路由
     {
       path: ‘/argu/:name‘,
       component: () => import(‘@/views/argu.vue‘)
     }
   
   ]
   
   

   b.嵌套路由

   parent.vue

   <template>
   	<div>
   		I an parent
   		<router-view></router-view>
   	</div>
   </template>
   <script>
   export default {
   
   }
   </script>
   
   

   child.vue

   <template>
   	<div>
   		I am child
   	</div>
   </template>
   <script>
   export default {
   
   }
   </script>
   
   

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

   c.命名路由

   在路由中需要添加name属性值

   app.vue

   <div id="app">
       <div id="nav">
         <!-- <router-link to="/">Home</router-link> | -->
   			<router-link v-bind:to="{name:‘home‘}">Home</router-link> |
         <!-- <router-link to="/about">About</router-link> -->
   			<router-link v-bind:to="{name:‘about‘}">About</router-link>
       </div>
       <router-view/>
     </div>
   

   d.命名视图

   app.vue

   <div id="app">
       <div id="nav">
         <!-- <router-link to="/">Home</router-link> | -->
   			<router-link v-bind:to="{name:‘home‘}">Home</router-link> |
         <!-- <router-link to="/about">About</router-link> -->
   			<router-link v-bind:to="{name:‘about‘}">About</router-link>
       </div>
       <router-view/>
   		<router-view name=‘email‘></router-view>
   		<router-view name=‘tel‘></router-view>
     </div>
   

     // 命名视图的使用
     {
       path: ‘/named_view‘,
       components: {
         default: () => import(‘@/views/child.vue‘),
         email: () => import(‘@/views/email.vue‘),
         tel: () => import(‘@/views/tel.vue‘)
       }
     }
   
   
   

3. JS操作路由

   <template>
     <div class="home">
   		<button @click="handleClick(‘back‘)">返回上一页</button>
   		<button @click="handleClick(‘push‘)">跳转到parent</button>
   		<button @click="handleClick(‘replace‘)">替换到parent</button>
     </div>
   </template>
   
   <script>
   // @ is an alias to /src
   import HelloWorld from ‘@/components/HelloWorld.vue‘
   
   export default {
     name: ‘Home‘,
     components: {
       HelloWorld
     },
     methods: {
       handleClick (type) {
         // 路由实例
         // this.$router.go(1) // 前进一页
         // this.$router.go(-1) // 后退一页
         if (type === ‘back‘) this.$router.back()
         // else if (type === ‘push‘) this.$router.push(‘/parent‘)
         else if (type === ‘push‘) {
           const name = ‘xxx‘
           this.$router.push({
             name: ‘argu‘,
             params: {
               name: ‘xxx‘
             }
             // path: `/argu/${name}`
             // name: ‘argu‘,
             // params: {
             //   name: ‘xxx‘
             // }
             // query: {
             //   name: ‘xx‘
             // }
           })
         } else if (type === ‘replace‘) {
           this.$router.replace({
             name: ‘parent‘
           })
         }
       }
   
     }
   }
   </script>
   
   

4. 重定向别名

   // 重定向
     // {
     //   path: ‘/main‘,
     //   redirect: ‘/‘
     // }
     // 通过命名视图的方式重定向
     // {
     //   path: ‘/main‘,
     //   redirect: {
     //     name: ‘home‘
     //   }
     // }
     // 通过方法的方式重定向
     {
       path: ‘/main‘,
       redirect: to => {
         // console.log(to)
         return ‘/‘
         // return {
         //   name: ‘home‘
         // }
       }
     }
   

   //命名
    {
       path: ‘/‘,
       // 设置别名
       alias: ‘/home_page‘,
       name: ‘home‘,
       component: Home
     },
   

路由详解(一)——基础