Vue中路由的使用

一.简介

        Vue Router是Vue.js官方的路由管理器。它和 Vue.js 的核⼼深度集成，让构建单⻚⾯应⽤变得简单

        理解： 一个路由（route）就是一组映射关系（key - value），多个路由需要路由器（router）进行管理

        前端路由：key是路径，value是组件

二.使用方法

        1.安装vue-router,执行命令 npm i vue-router

        2.在main.js中引用及使用vue-router  

//引入Vue
import Vue from 'vue'
// 引入App
import App from './App.vue'
Vue.config.productionTip = false
//引入vue-router
import VueRouter from 'vue-router'
//引入路由器
import router from './router'

//应用插件
Vue.use(VueRouter)

//创建vm
new Vue({
    el:'#app',
    render: h => h(App),
    router:router
})

3.创建router.js文件编写router配置项

//该文件专门用于创建整个应用的路由器
import VueRouter from 'vue-router'
//引入组件
import About from '../components/About'
import Home from '../components/Home'

//创建并暴露一个路由器
export default new VueRouter({
    routes:[
        {
            path:'/about',
            component:About
        },
        {
            path:'/home',
            component:Home
        },
    ]
})

4.实现路由切换

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

5.指定路由展示位置

<router-view></router-view>

 三.注意点

        1.路由组件通常存放在pages文件夹，一般的组件通常存放在components文件夹

        2.通过切换，”隐藏“了的路由组件，默认是被销毁掉的，需要的时候在去挂载

        3.每个组件都有自己的$route属性，里面存储着自己的路由信息

        4.整个应用只有一个router,可以通过组件的$router属性获取到

四.多级路由

1.使用children配置项配置子路由

import VueRouter from 'vue-router'
//引入组件
import About from '../pages/About'
import Home from '../pages/Home'
import News from '../pages/News'
import Message from '../pages/Message'

//创建并暴露一个路由器
export default new VueRouter({
    routes:[
        {
            path:'/about',
            component:About
        },
        {
            path:'/home',
            component:Home,
            children:[
                {
                    path:'news',
                    component:News
                },
                {
                    path:'message',
                    component:Message
                }
            ]
        }
    ]
})

2.跳转(要写完整路径)

<router-lin to="/home/message">Message</router-link>

五.命名路由

1.作用:简化路由的跳转

2.命名方法

import VueRouter from 'vue-router'
//引入组件
import About from '../pages/About'
import Home from '../pages/Home'
import News from '../pages/News'
import Message from '../pages/Message'

//创建并暴露一个路由器
export default new VueRouter({
    routes:[
        {
            path:'/about',
            component:About
        },
        {
            path:'/home',
            component:Home,
            children:[
                {
                //命名路由
                    name:'news',
                    path:'news',
                    component:News
                },
                {
                    path:'message',
                    component:Message
                }
            ]
        }
    ]
})

 3.简化跳转

要链接到一个命名路由，可以给router-link的to属性传一个对象：

<router-link :to="{name:'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:001,
          title:'你好'
        }
    }">

2.接收参数

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

七.路由的parmas参数

1.配置路由，声明接收params参数(以Detail组件为例)

{
	path:'/home',
	component:Home,
	children:[
		{
			path:'news',
			component:News
		},
		{
			component:Message,
			children:[
				{
					name:'xiangqing',
					path:'detail/:id/:title', //使用占位符':'声明接收params参数
					component:Detail
				}
			]
		}
	]
}

传递参数

<!-- 跳转并携带params参数，to的字符串写法 -->
<router-link :to="/home/message/detail/666/你好">跳转</router-link>
				
<!-- 跳转并携带params参数，to的对象写法 -->
<router-link 
	:to="{
		name:'xiangqing',
		params:{
		   id:666,
            title:'你好'
		}
	}"
>跳转</router-link>

八.路由的props配置

作用：让路由组件更方便的收到参数

使用场景：路由组件读取参数时太麻烦

name:'xiangqing',
path:'detail',
component:Detail,
//props的第一种写法,值为对象,该对象中的所有key-value属性都会以props的形式传给Detail组件
// props:{a:1,b:'hello'}

//props的第二种写法,值为布尔值,若布尔值为真,就会把该路由组件收到的所有params参数,以props的形式传给Detail组件
// props:true

//props的第三种写法,值为函数,该函数返回的对象中每一组key-value都会通过props传给Detail组件
props($route){
    return{
        id:$route.query.id,
        title:$route.query.title
    }
}
//query解构赋值
// props({query:{id,title}}){ 
//     return {id:id,title:title}
// }

接收参数

<template>
  <ul>
    <li>消息编号: {{id}}</li>
    <li>消息标题: {{title}}</li>
  </ul>
</template>