Vue - 路由基本配置

理解：一個路由（route）就是一組映射關系（key-value）,多個路由需要路由器（router）進行管理。每個組件都有自己得$route屬性，里面存儲着自己的路由信息。整個應用只有一個router，可以通過組件的$router屬性獲取。

基本使用

1.安裝vue-router，命令：npm i vue-router

2.應用插件：Vue.use(VueRouter)

3.編寫router配置項:

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'

Vue.use(VueRouter)

const routes = [
 {
   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'),
   
 }
]

const router = new VueRouter({
 mode: 'history',
 base: process.env.BASE_URL,
 routes
})

export default router

4.實現切換（active-class可配置高亮樣式）

<router-link active-class="active" to="/about">About</router-link>

5.指定展示位置

<router-view></router-view>

多級路由

1.配置路由規則時，使用children配置項

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'

Vue.use(VueRouter)

const routes = [
  {
    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'),
    children:[
      {
        path:'person',
        name:'Person',
        component: () => import('../views/Person'),
        children:[
          {
            name:'Info',
            path:'info',
            component: () => import('../views/Info')
          }
        ]
      }
    ]
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

2.跳轉（要寫完整路徑）：

<router-link to="/about/news">News</router-link>

路由的query參數

1.傳遞參數

<!-- 跳轉並攜帶query參數，to的字符串寫法 -->
<router-link :to="/home/message/detail?id=666&title=你好">跳轉</router-link>
				
<!-- 跳轉並攜帶query參數，to的對象寫法 -->
<router-link 
	:to="{
		path:'/home/message/detail',
		query:{
		   id:666,
            title:'你好'
		}
	}"
>跳轉</router-link>

2.接收參數：

$route.query.id
$route.query.title

命名路由

1.作用：簡化路由的跳轉
2.使用：

1. 命名
const routes = [
  {
    path: '/',
    name: 'Home', //路由命名
    component: Home
  }
]


2.跳轉

<router-link :to="{
          name:'Info', //跳轉到name=Info的組件
          query:{
            name:person.name,
            age:person.age
          }
        }">
          成員{{index}}
</router-link>

路由的params參數

1.配置路由，聲明接收params參數

{
    path: '/about',
    name: 'About',
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue'),
    children:[
      {
        path:'person',
        name:'Person',
        component: () => import('../views/Person'),
        children:[
          {
            name:'Info',
            path:'info/:name/:age',  //使用占位符聲明接收params參數
            component: () => import('../views/Info')
          }
        ]
      }
    ]
  }

2.傳遞參數

<!-- 跳轉並攜帶params參數，to的字符串寫法 -->
<router-link :to="/about/info/張三/18">跳轉</router-link>
<!-- 跳轉並攜帶params參數，to的對象寫法 -->
<router-link :to="{
          name:'Info', //跳轉到name=Info的組件
          params:{   //params參數
            name:person.name,
            age:person.age
          }
        }">
          成員{{index}}
</router-link>

特別注意：路由攜帶params參數時，若使用to的對象寫法，則不能使用path配置項，必須使用name配置！

3.接收參數

<div>
    <p>姓名：{{$route.params.name}}</p>
    <p>年齡：{{$route.params.age}}</p>
  </div>