vue-router 是 vue.js 官方给出的路由解决方案。它只能结合 vue 项目进行使用，能够轻松的管理 SPA 项目中组件的切换。点击页面的导航链接时，不会刷新页面，只会局部更新
使用步骤:
安装vue-router，命令
npm i vue-router@3.2.0
在src同级目录下创建router目录，并创建路由的js配置文件,index.js
创建组件（多个）
Home组件
<template>
<div>
<h1>我是Home组件</h1>
</div>
</template>
<script>
export default {
name: "Home"
}
</script>
About组件
<template>
<div>
<h1>我是About组件</h1>
</div>
</template>
<script>
export default {
name: "About"
}
</script>
编写路由的配置文件index.js
'/'：默认展示页面
// 1.引入路由的核心库
import VueRouter from "vue-router";
// 2.引入要被路由的组件
import Home from "@/components/Home";
import About from "@/components/About";
// 3.创建并暴露路由
export default new VueRouter({
routes:[
{
path:'/',
component:Home
},
{
path:'/about',
component:About
},
{
path:'/home',
component:Home
}
})
在main.js配置路由
import Vue from 'vue'
import App from './App.vue'
// 引入路由核心库
import VueRouter from "vue-router";
// 引入路由配置文件
import router from './router/index';
Vue.config.productionTip = false
Vue.use(VueRouter)
new Vue({
render: h => h(App),
router // vue加载路由
}).$mount('#app')
在App.vue中注册组件，并使用
<template>
<div id="app">
<router-link to="/home">Home</router-link>
<router-link to="/about">About</router-link>
<hr/>
<!-- 准备被路由组件显示的位置-->
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'App',
components: {
}
}
</script>
组件中包含组件，形成组件之间的嵌套，路由之间形成层级关系
创建组件,eg：News组件和Message组件
News组件：
<template>
<div>
<ul>
<li>唱歌</li>
<li>跳舞</li>
<li>篮球</li>
</ul>
</div>
</template>
<script>
export default {
name: "News"
}
</script>
Message组件：
<template>
<div>
<ol>
<li>
<a href="#">测试数据1</a>
</li>
<li>
<a href="#">测试数据2</a>
</li>
<li>
<a href="#">测试数据3</a>
</li>
</ol>
</div>
</template>
<script>
import {nanoid} from 'nanoid';
export default {
name: "Message"
}
</script>
更改路由组件的配置，在父组件的路由下配置子组件路由
注意：二级路径不加/
// 引入路由的核心库
import VueRouter from "vue-router";
// 引入要被路由的组件
import Home from "@/components/Home";
import About from "@/components/About";
import News from "@/components/News";
import Message from "@/components/Message";
import Detial from "@/components/Detail";
// 创建并暴露路由
export default new VueRouter({
routes:[
{
path:'/',
component:Home
},
{
path:'/about',
component:About
},
{
path:'/home',
component:Home,
children:[
{
path:'news', /* 二级路径不写/ */
component:News
},
{
path:'message',
component:Message
}
]
}
]
})
父组件中展示内容，父组件Home
多级路由跳转要写全路径
<template>
<div>
<h1>我是Home组件</h1>
<router-link to="/home/news">News</router-link>
<router-link to="/home/message">Message</router-link>
<hr/>
<!-- Home组件中路由显示的位置 -->
<router-view></router-view>
</div>
</template>
<script>
export default {
name: "Home"
}
</script>
加入现在Message组件要给它的子组件Detail组件传参
路由配置文件中配置
// 引入路由的核心库
import VueRouter from "vue-router";
// 引入要被路由的组件
import Home from "@/components/Home";
import About from "@/components/About";
import News from "@/components/News";
import Message from "@/components/Message";
import Detial from "@/components/Detail";
// 创建并暴露路由
export default new VueRouter({
routes:[
{
path:'/',
component:Home
},
{
path:'/about',
component:About
},
{
path:'/home',
component:Home,
children:[
{
path:'news', /* 二级路径不写/ */
component:News
},
{
path:'message',
component:Message,
children:[
{
path:'detail',
component:Detial
}
]
}
]
}
]
})
Message组件传递
方式1：
使用模板字符串，并且给to属性添加:，拼接url，${}的形式带参
<template>
<div>
<ol>
<li v-for="msg in msgList" :key="msg.id">
<router-link :to="`/home/message/detail? id=${msg.id}&title=${msg.title}`">{{msg.title}}</router-link>
</li>
</ol>
<hr/>
<router-view></router-view>
</div>
</template>
<script>
import {nanoid} from 'nanoid';
export default {
name: "Message",
data(){
return{
msgList:[
{id:nanoid(),title:'消息数据A'},
{id:nanoid(),title:'消息数据B'},
{id:nanoid(),title:'消息数据C'}
]
}
}
}
</script>
方式2：
改为对象形式的传参
<template>
<div>
<ol>
<li v-for="msg in msgList" :key="msg.id">
<router-link :to="{
path:'/home/message/detail',
query:{
id:msg.id,
title:msg.title
}
}" >
{{msg.title}}
</router-link>
</li>
</ol>
<hr/>
<router-view></router-view>
</div>
</template>
<script>
import {nanoid} from 'nanoid';
export default {
name: "Message",
data(){
return{
msgList:[
{id:nanoid(),title:'消息数据A'},
{id:nanoid(),title:'消息数据B'},
{id:nanoid(),title:'消息数据C'}
]
}
}
}
</script>
Detail子组件中接收数据
使用$route属性，因为参数在url中所以要使用query，再.上参名即可传参
<template>
<div>
<ul>
<li>消息编号:{{$route.query.id}}</li>
<li>消息标题:{{$route.query.title}}</li>
</ul>
</div>
</template>
<script>
export default {
name: "Detail"
}
</script>
跳转时路径较长，使用命名路由简化跳转路径
实现步骤：
在路由配置中，给路由添加一个name属性，index.js
例如上述案例中给Detail组件添加一个命名路由，detail的路由配置如下
{
path:'message',
component:Message,
children:[
{
path:'detail',
name:'xq', // 添加命名
component:Detial
}
]
}
组件使用对象形式的跳转
使用name属性进行跳转
<template>
<div>
<ol>
<li v-for="msg in msgList" :key="msg.id">
<router-link :to="{
// path:'/home/message/detail',
name:'xq', // 用name属性跳转
query:{
id:msg.id,
title:msg.title
}
}" >
{{msg.title}}
</router-link>
</li>
</ol>
<hr/>
<router-view></router-view>
</div>
</template>
<script>
import {nanoid} from 'nanoid';
export default {
name: "Message",
data(){
return{
msgList:[
{id:nanoid(),title:'消息数据A'},
{id:nanoid(),title:'消息数据B'},
{id:nanoid(),title:'消息数据C'}
]
}
}
}
</script>
作用：路由之间进行参数传递，因此url中的参数名
实现步骤：
在路由配置中添加占位符，index.js中
{
path:'message',
component:Message,
children:[
{
path:'detail/:id/:title',
name:'xq',
component:Detial
}
]
}
给path添加占位符，:参数名
改变传参对象，query传参改为params传参，Message组件
使用params传参
情况1：对象形式
<template>
<div>
<ol>
<li v-for="msg in msgList" :key="msg.id">
<router-link :to="{
name:'xq', // 用name属性跳转
params:{
id:msg.id,
title:msg.title
}
}" >
{{msg.title}}
</router-link>
</li>
</ol>
<hr/>
<router-view></router-view>
</div>
</template>
<script>
import {nanoid} from 'nanoid';
export default {
name: "Message",
data(){
return{
msgList:[
{id:nanoid(),title:'消息数据A'},
{id:nanoid(),title:'消息数据B'},
{id:nanoid(),title:'消息数据C'}
]
}
}
}
</script>
情况2：字符串形式路径
<router-link :to="`/home/message/detail/${msg.id}/${msg.title}`"> {{msg.title}}
</router-link>
改变数据接收，query接收改为params接收，Detail组件
使用params接收
<template>
<div>
<ul>
<li>消息编号:{{$route.params.id}}</li>
<li>消息标题:{{$route.params.title}}</li>
</ul>
</div>
</template>
<script>
export default {
name: "Detail"
}
</script>
作用：简化接收参数
实现步骤：
路由配置中配置props属性
方式一：固定值方式
props:{id:xxx,titel:...}
方式二：启用方式
{
path:'message',
component:Message,
children:[
{
path:'detail/:id/:title',
name:'xq',
component:Detial,
props:true // 启用方式
}
]
}
方式三：决定来源的方式
{
path:'message',
component:Message,
children:[
{
path:'detail/:id/:title',
name:'xq',
component:Detial,
props($route){
return {
id : $route.params.id, //params/query 取决于来源于哪
title : $route.params.title
}
}
}
]
}
传参组件中params传参
<router-link :to="{
name:'xq', // 用name属性跳转
params:{
id:msg.id,
title:msg.title
}
}" >
{{msg.title}}
</router-link>
接收组件中添加props接收，通过插值表达式使用
<template>
<div>
<ul>
<li>消息编号:{{id}}</li>
<li>消息标题:{{title}}</li>
</ul>
</div>
</template>
<script>
export default {
name: "Detail",
props:['id','title']
}
</script>
在Home组件中添加前进后退按钮
<template>
<div>
<h1>我是Home组件</h1>
<router-link to="/home/news">News</router-link>
<router-link to="/home/message">Message</router-link>
<button @click="back">后退</button>
<button @click="forward">前进</button>
<hr/>
<router-view></router-view>
</div>
</template>
<script>
export default {
name: "Home",
methods:{
back(){
this.$router.back(); // $router : main.js中的名字
},
forward(){
this.$router.forward();
}
}
}
</script>
在Message组件中添加模式
<!-- 可以写push 或者 replace 模式 -->
<router-link push :to="{
// path:'/home/message/detail',
name:'xq',
params:{
id:msg.id,
title:msg.title
}
}" >
{{msg.title}}
</router-link>
push：追加历史记录
记录历史记录，一步一步回退
replace：替换当前历史记录
不保留历史记录，直接退回上个路由
声明式
上例中浏览器的写入模式演示的就是声明式的导航方式
<!-- 可以写push 或者 replace 模式 -->
<router-link push :to="{
// path:'/home/message/detail',
name:'xq',
params:{
id:msg.id,
title:msg.title
}
}" >
{{msg.title}}
</router-link>
编程式
编程式绑定事件，传参通过()方式传递，方法中可以采用push或replace方式，方法中给一个配置对象，跳转地址，参数等
<template>
<div>
<ol>
<li v-for="msg in msgList" :key="msg.id">
<button @click="goDetail(msg.id,msg.title)">{{msg.title}}</button>
</li>
</ol>
<hr/>
<router-view></router-view>
</div>
</template>
<script>
import {nanoid} from 'nanoid';
export default {
name: "Message",
data(){
return{
msgList:[
{id:nanoid(),title:'消息数据A'},
{id:nanoid(),title:'消息数据B'},
{id:nanoid(),title:'消息数据C'}
]
}
},
methods:{
goDetail(id,title){
this.$router.push({
name:'xq',
params:{
id:id,
title:title
}
})
}
}
}
</script>
News组件中有输入框
<template>
<div>
<ul>
<li>唱歌 <input type="text"></li>
<li>跳舞 <input type="text"></li>
<li>篮球 <input type="text"></li>
</ul>
</div>
</template>
<script>
export default {
name: "News"
}
</script>
Message组件有输入框
<template>
<div>
<ol>
<li v-for="msg in msgList" :key="msg.id">
<button @click="goDetail(msg.id,msg.title)">{{msg.title}}</button>
<input type="text">
</li>
</ol>
<hr/>
<router-view></router-view>
</div>
</template>
<script>
import {nanoid} from 'nanoid';
export default {
name: "Message",
data(){
return{
msgList:[
{id:nanoid(),title:'消息数据A'},
{id:nanoid(),title:'消息数据B'},
{id:nanoid(),title:'消息数据C'}
]
}
},
methods:{
goDetail(id,title){
this.$router.push({
name:'xq',
params:{
id:id,
title:title
}
})
}
}
}
</script>
想要输入框的输入内容在跳转组件之后仍存在，需要给Home.vue父组件添加缓存
<template>
<div>
<h1>我是Home组件</h1>
<router-link to="/home/news">News</router-link>
<router-link to="/home/message">Message</router-link>
<hr/>
<keep-alive>
<router-view></router-view>
</keep-alive>
</div>
</template>
<script>
export default {
name: "Home"
}
</script>
用<keep-alive></keep-alive>标签包裹<router-view></router-view>
指定组件缓存：include="指定缓存组件的组件名"
<keep-alive include="News">
<router-view></router-view>
</keep-alive>
指定多组件缓存：:include="['组件名','组件名'...]"
<keep-alive :include="['News','Message']">
<router-view></router-view>
</keep-alive>
在缓存的组件中添加缓存激活/失活生命周期函数
激活状态：activated(){}
失活状态：deactivated(){}
eg：News组件
<template>
<div>
<ul>
<li>唱歌 <input type="text"></li>
<li>跳舞 <input type="text"></li>
<li>篮球 <input type="text"></li>
</ul>
</div>
</template>
<script>
export default {
name: "News",
activated() {
console.log("组件激活")
},
deactivated() {
console.log("组件失活")
}
}
</script>
类似于过滤器的作用
全局路由守卫 ：全部的路由都会执行
前置路由守卫
路由配置文件中配置路由守卫，将创建路由对象，并配置路由守卫，最后将路由对象暴露
// 引入路由的核心库
import VueRouter from "vue-router";
// 引入要被路由的组件
import Home from "@/components/Home";
import About from "@/components/About";
import News from "@/components/News";
import Message from "@/components/Message";
import Detial from "@/components/Detail";
// 创建并暴露路由
const router = new VueRouter({
routes:[
{
path:'/',
component:Home
},
{
path:'/about',
component:About
},
{
path:'/home',
component:Home,
children:[
{
path:'news', /* 二级路径不写/ */
component:News
},
{
path:'message',
component:Message,
children:[
{
path:'detail/:id/:title',
name:'xq',
component:Detial,
props:true
}
]
}
]
}
]
})
// 全局路由守卫
// 1.前置路由守卫
// 箭头函数三个参数，to:去哪里 from:从哪里来 next:执行next()才放行，不执行则拦截
router.beforeEach((to, from, next)=>{
console.log(to,from);
next();
})
export default router;
后置路由守卫
// 2.后置路由首位
// 箭头函数两个参数，to:去往哪里 from:从哪里来
router.afterEach((to, from)=>{
console.log(to);
console.log(from);
})
针对于某个路由的守卫，再路由配置中添加独享路由守卫，例如给detail添加独享守卫
// 引入路由的核心库
import VueRouter from "vue-router";
// 引入要被路由的组件
import Home from "@/components/Home";
import About from "@/components/About";
import News from "@/components/News";
import Message from "@/components/Message";
import Detial from "@/components/Detail";
// 创建并暴露路由
const router = new VueRouter({
routes:[
{
path:'/',
component:Home
},
{
path:'/about',
component:About
},
{
path:'/home',
component:Home,
children:[
{
path:'news', /* 二级路径不写/ */
component:News
},
{
path:'message',
component:Message,
children:[
{
path:'detail/:id/:title',
name:'xq',
component:Detial,
props:true,
// 独享路由守卫
beforeRouteEnter(to,from,next){
console.log(to);
console.log(from);
next();
}
}
]
}
]
}
]
})
export default router;
组件内部的路由守卫
<template>
<div>
<h1>我是About组件</h1>
</div>
</template>
<script>
export default {
name: "About",
beforeRouteEnter(to,from,next){
//组件前置路由守卫
console.log(to);
console.log(from);
next(); // 执行放行
},
beforeRouteLeave(to,from,next){
//组件后置路由守卫
console.log(to);
console.log(from);
next(); // 组件后置路由守卫执行next()方法才会出去
}
}
</script>