vue路由详解（知识点重温）

重温vue路由知识点，此大部分内容从尚硅谷天禹老师vue教程学习总结而来

什么是路由?

• 一个路由就是一组映射关系（key - value）
• key 为路径, value 可能是 function 或 component

路由分类

1. 后端路由：

• 理解：value 是 function, 用于处理客户端提交的请求。
• 工作过程：服务器接收到一个请求时, 根据请求路径找到匹配的函数
  来处理请求, 返回响应数据。

2. 前端路由：

• 理解：value 是 component，用于展示页面内容。
• 工作过程：当浏览器的路径改变时, 对应的组件就会显示。

定义路由组件 => 注册路由 => 使用路由

安装

手动安装

  在已有Vue项目中

npm install --save vue-router

注意：现在vue官方将vue-router@4作为默认版本，如果是vue2项目要装vue-router的3版本，否则会报错

npm install --save vue-router@3

自定义安装

  使用vue-cli创建自带vue-router的新项目

路由配置

• 如果选择了手动安装，需要手动在src文件夹下新建一个名为router的文件夹并新建index.js文件

// src/router/index.js
import Vue from 'vue' // 引入Vue
import VueRouter from 'vue-router' // 引入VueRouter
// 使用VueRouter
Vue.use(VueRouter)

exports default  new VueRouter({
  //路由配置
  })

main.js中引用

// src/router/index.js

import Vue from 'vue' // 引入Vue
import VueRouter from 'vue-router' // 引入VueRouter
import router from ./router  //引入路由器

// 使用VueRouter
Vue.use(VueRouter)

new Vue({  
    el:'#app', 
    render:h => h(app),
    router:router
})

• 如果选择了自定义安装，不用自己进行配置，新建项目完毕后就可以直接使用了

路由基本使用

实例

//引入VueRouter
import VueRouter from 'vue-router'
//引入Luyou 组件
import About from '../components/About'
import Home from '../components/Home'

//创建router实例对象，去管理一组一组的路由规则
const router = new VueRouter({
    routes:[
        {
            path:'/about',
            component:About
        },
        {
            path:'/home',
            component:Home
        }
    ]
})

//暴露router
export default router

// 切换路由

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

// 指定展示位置

<router-view></router-view>

路由几个注意点

• 路由组件通常存放在pages文件夹，一般组件通常存放在components文件夹。
• 通过切换，“隐藏”了的路由组件，默认是被销毁掉的，需要的时候再去挂载。
• 每个组件都有自己的$route属性，里面存储着自己的路由信息。
• 整个应用只有一个router，可以通过组件的$router属性获取到。

多级路由

多级路由配置

routes:[
	{
		path:'/about',
		component:About,
	},
	{
		path:'/home',
		component:Home,
		children:[ //通过children配置子级路由
			{
				path:'news', //此处一定不要写：/news
				component:News
			},
			{
				path:'message',//此处一定不要写：/message
				component:Message
			}
		]
	}
]

跳转（要写完整路径）

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

路由的query参数

1、传递参数

<!-- 跳转并携带query参数，to的字符串写法 -->
<li v-for="m in xxx" :key="m.id">
<router-link :to="`/home/message/detail?id=${m.id}&title=${m.title}`">跳转</router-link> // 在 `` 模板字符串里, 使用js表达式 --> ${表达式}
    
<!-- 跳转并携带query参数，to的对象写法 -->
<router-link 
	:to="{
		path:'/home/message/detail',
		query:{
		   id:m.id,
           title:m.title
		}
	}"
>跳转到{{m.title}}</router-link>
</li>

2、接收参数

<li>编号: {{$route.query.id}}</li>
<li>标题: {{$route.query.title}}</li>

路由的params参数

1、配置路由，声明接收params参数

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

2、传递参数

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

注意：路由携带params参数时，若使用to的对象写法，则不能使用path配置项，必须使用name配置！

3、接收参数

$route.params.id
$route.params.title

路由的props配置

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

{
	name:'detail',
	path:'detail/:id',
	component:Detail,

	//第一种写法：props值为对象，该对象中所有的key-value的组合最终都会通过props传给Detail组件
	// props:{a:900}

	//第二种写法：props值为布尔值，布尔值为true，则把路由收到的所有params参数通过props传给Detail组件
	// props:true
	
	//第三种写法：props值为函数，该函数返回的对象中每一组key-value都会通过props传给Detail组件
	props($route){
		return {
			id:$route.query.id,
			title:$route.query.title
		}
	}
}

编程式路由导航

//$router的两个API
this.$router.push({  //一般栈结构, 
	name:'xxx',
		params:{
			id:xxx,
			title:xxx
		}
})
this.$router.replace({ //栈结构, 但新的数据,会替换旧的
	name:'xxx',
		params:{
			id:xxx,
			title:xxx
		}
})
this.$router.forward() //前进
this.$router.back() //后退
this.$router.go() //可前进也可后退, 通过传递参数,来控制前进与后退的跳转页数

Router的相关配置

属性名	类型	描述
routes	Array	当前Router中所有路由配置
modeString	可选值: “hash” / “history”	默认值’hash’ 该模式下路由使用hash保证路由与视图一致history 模式使用h5新增 window.history 实现路由与视图一致
linkActiveClass	String	默认值: “router-link-active” 全局配置 <router-link> 默认的激活的 class
linkExactActiveClass	String	默认值: “router-link-exact-active” 全局配置 <router-link> 默认的精确激活的 class。

例子:

to="/home"   url="/home/about" 非严格匹配
to="/home"   url="/home/about/123" 非严格匹配
to="/home"   url="/home"  严格匹配
to="/"       url="/user" / 是所有路由的根路由,所以他们非严格匹配

Router.routes 的相关配置

  在router文件夹的index.js文件的new VueRouter({routers:[{ path…}]})里的配置

path: string,//路由路径
component: Component, // 当前路由匹配时显示的路由组件
name: string, // 命名路由
redirect: string | Location | Function, // 路由重定向
props: boolean | Object | Function,  //
alias: string | Array<string>, // 路由别名
children: Array<RouteConfig>, // 嵌套路由
beforeEnter: (to: Route, from: Route, next: Function) => void, //路由守卫
caseSensitive: boolean, // 匹配规则是否大小写敏感？(默认值：false)
}

在组件中实现路由

VueRouter给Vue提供了两个组件

• router-link
• router-view

1、 router-link 用于实现路由的跳转组件:该组件支持的属性

 to: string | location 当用户点击该组件时就会跳转至to指定的路由

// 导航指定的url
<router-link to="/home">主页</router-link>
<router-link to="/about">关于</router-link>
<router-link to="/user">用户</router-link>
/* 导航指定的location
vue router中location对象的常用属性{
    path:'/', //指定跳转路由的路径
    hash:'#top' // 指定跳转路由的哈希值 
  name: 'Home', // 指定跳转的具名路由的name值
params: {}, // 指定跳转的路由传递params对象
query: {} //  指定跳转的路由传递query键值对
}
*/
<router-link :to="{path:'/user'}">user</router-link>
// 使用location进行页面跳转时,当前location的params属性无法传递给路由组件的
<router-link :to="{path:'/user',hash:'#top',params:{id:1,name:'xx'}}">user</router-link>
// 使用name路由导航,可以向任何具名路由传递params
<router-link :to="{name:'User',hash:'#top',params:{id:1,name:'xx'}}">user</router-link>
// query支持 name导航和path导航,不推荐传递对象属性时使用query传参
<router-link :to="{name:'User',hash:'#top',query:{id:1,name:'xx'}}">user</router-link>

 tag: string 指定当该router-link标签最终以什么DOM元素渲染到页面上,默认是a标签的形式展示

// 将router-link以span元素渲染到页面上
<router-link tag="span" class="tab-item" to="/">主页</router-link>

 replace: bool 当该属性为真时,路由的跳转将以替换的形式跳转到下一个页面(下一个路由会把当前浏览器历史记录栈中的url替换成将要跳转的路由),默认值为false

// 使用替换的形式跳转路由
<router-link class="tab-item" replace to="/user">用户</router-link>

 active-class: string 指定当前router-link元素,如果与浏览器url非严格匹配时class名。默认值是VueRouter实例化时 linkActiveClass 指定值

// 当前router-link非严格匹配时class名为xxx
<router-link  active-class="xxx" to="/about">关于</router-link>

 exact-active-class:string 指定当前router-link元素,如果与浏览器url严格匹配时class名。默认值是VueRouter实例化时 linkExactActiveClass 指定值

// 当前router-link严格匹配时class名为ex
<router-link exact-active-class="ex" to="/">主页</router-link>

 exact: bool 指定当前router-link元素使用严格匹配,这时active-class 只能在严格匹配的模式下被激活,默认值false

// 当前路由开启严格匹配模式
<router-link exact  to="/">主页</router-link>

 event: string | Array<string> 指定当前router-link元素,声明可以用来触发导航的事件。可以是一个字符串或是一个包含字符串的数组。默认值是click

// 双击 和 点击都能触发当前元素的路由跳转
<router-link :event="['dblclick','click']"  to="/">主页</router-link>

2、 router-view 根据当前VueRouter的配置,当路由路由路径发生改变时渲染对应的路由视图组件

    router-view 组件是一个 functional 组件，渲染路径匹配到的视图组件。<router-view>
渲染的组件还可以内嵌自己的 <router-view>，根据嵌套路径，渲染嵌套组件。
其他属性 (非 router-view 使用的属性除name) 都直接传给渲染的组件，很多时候，每个路由的数据都是包含在路由参数中。

<div id="app">
  <router-view data="somedata"/>
</div>
// data属性会作为props直接传递给 router-view渲染的视图组件

因为它也是个组件，所以可以配合 transition 和 keep-alive 使用。如果两个结合一起用，要确保在内层使用 keep-alive：

<transition name="fade">
  <keep-alive> //保持存活不被卸载
    <router-view></router-view>
  </keep-alive>
</transition>