vue-router
了解
vue插件库，用来实现SPA应用（单页面）
整个页面只有一个完整的页面
点击页面中导航链接，不会刷新页面，只做局部更新
数据通过ajax请求
路由的理解
- 一组映射关系（key-value）
- key：路径，value：function或component
前端路由
value是compoent，展示页面内容。
当浏览器路径改变时，展示对应的组件
后端路由
value是function，处理客户端提交的请求。
服务器接收到请求，根据请求路径找到匹配的函数来处理请求，返回响应数据
基本路由
安装vue-router
| vue-version | name | version |
|---|---|---|
| Vue2.x | Vuex | 3.x |
| Vue2.x | Vue-router | 3.x |
| Vue2.x | Vue-cli | 3.x 4.x |
| Vue3.x | Vuex | 4.x |
| Vue3.x | Vue-router | 4.x |
| Vue3.x | Vuex-cli | 4.x |
npm i vue-router@3.5.3配置路由
|-src|--router|---index.js===================================import VueRouterfrom'vue-router';import Aboutfrom"../components/About";import Homefrom"../components/Home"exportdefaultnewVueRouter({
routes:[{
path:'/about',
component: About},{
path:'/home',
component: Home},]})==============================================
#main.jsimport Vuefrom'vue'import Appfrom'./App.vue'import VueRouterfrom'vue-router'import routerfrom'./router'
Vue.config.productionTip=false
Vue.use(VueRouter)newVue({render:h=>h(App),
router: router,}).$mount('#app')#App.vue
========================================<template><div><divclass="row"><Banner/></div><divclass="row"><divclass="col-xs-2 col-xs-offset-2"><divclass="list-group">
#实现切换active-class可配置被选中的样式<router-linkclass="list-group-item"active-class="active"to="/about">About</router-link><router-linkclass="list-group-item"active-class="active"to="/home">Home</router-link></div></div><divclass="col-xs-6"><divclass="panel"><divclass="panel-body">
#指定展示位置<router-view></router-view></div></div></div></div></div></template><script>import Bannerfrom"./components/Banner";exportdefault{
name:'App',
components:{
Banner}}</script>#Home.vue,About.vue,Banner.vue<template><div><h2>我是About的内容</h2></div></template><script>exportdefault{
name:"About"}</script>
=============================================<template><div><h2>我是Home的内容</h2></div></template><script>exportdefault{
name:"Home"}</script>
================================<template><divclass="col-xs-offset-2 col-xs-8"><divclass="page-header"><h2>Vue Router Demo</h2></div></div></template><script>exportdefault{
name:"Banner"}</script>
注意⚠️
- 路由组件通常存放在
pages文件夹，一般组件通常存放在components文件夹- 通过切换，“隐藏”了的路由组件，默认是被销毁的，需要的时候再去挂载
- 每个组件都有自己的
$route属性，存储自己的路由信息- 整个应用只有一个router，可通过组件的
$router属性获取
嵌套路由
配置多级路由
import VueRouterfrom'vue-router';import Aboutfrom"../pages/About";import Homefrom"../pages/Home"import Messagefrom"../pages/Message";import Newsfrom"../pages/News";exportdefaultnewVueRouter({
routes:[{
path:'/about',
component: About},{
path:'/home',
component: Home,
children:[{
path:'message',//不能写成“/message”
component: Message},{
path:'news',//不能写成“/news”
component: News}]},]})跳转（要写完整路径）
<template><div><h2>我是Home的内容</h2><ulclass="nav nav-tabs"><li><router-linkclass="list-group-item"active-class="active"to="/home/news">News</router-link></li><li><router-linkclass="list-group-item"active-class="active"to="/home/message">Message</router-link></li></ul><router-view></router-view></div></template><script>exportdefault{
name:"Home"}</script>路由传参
query参数
<!-- 路由跳转，携带参数，to的【字符串】写法--><router-link:to="`/home/message/detail?id=${item.id}&title=${item.title}`">{{item.title}}</router-link><!-- 路由跳转，携带参数，to的【对象】写法--><router-link:to="{
path:'/home/message/detail',
query: {
id:item.id,
title:item.title,
}
}">{{item.title}}</router-link><script>data(){return{
messageList:[{id:'001', title:'消息1'},{id:'002', title:'消息2'},{id:'003', title:'消息3'},]}}</script>
#接收参数<li>消息编号：{{$route.query.id}}</li><li>消息内容：{{$route.query.title}}</li>命名路由
使用
name，跳转地址只能使用to的对象写法，用name属性。否则会被解析成path路径????
:to=“xiangqiang”
<router-link:to="{
//path:'/home/message/detail',
name:'xiangqing', //使用name简化
query: {
id:item.id,
title:item.title,
}
}">{{item.title}}</router-link><script>
routes:[{
path:'/home',
component: Home,
children:[{
path:'message',
component: Message,
children:[{
name:'xiangqing',//给路由命名
path:'detail',
component: Detail,}]},]},]</script>params参数
restful风格
⚠️使用
params参数,to的对象写法,不能使用path属性,只能使用name属性
<router-link:to="`/home/message/detail/${item.id}/${item.title}`">{{item.title}}</router-link><router-link:to="{
// path:'/home/message/detail',
name:'xiangqing',
params: {
id:item.id,
title:item.title,
}
}">{{item.title}}</router-link>
===================================================
#route -> index.js<script>
children:[{
name:'xiangqing',
path:'detail/:id/:title',//占位符接收params参数
component: Detail,}]</script>
#接收参数<li>消息编号：{{$route.params.id}}</li><li>消息内容：{{$route.params.title}}</li>props配置
使路由组件更方便的收到参数
#route-> index.js======================================{
path:'message',
component: Message,
children:[{
name:'xiangqing',
path:'detail',
component: Detail,//第一种写法:props值为对象,该对象中所有的key-value会通过props传给Detail组件
props:{a:334},//第二种:props值为布尔值,则把路由收到的所有params参数通过props传给Detail组件
props:true//第三种:props值为函数,该函数返回的对象中每一组key-value都会通过props传给Detail组件props($route){return{
id:$route.query.id,
title:$route.query.title,}}}]}=====================================
#Message.vue<router-link:to="`/home/message/detail?id=${item.id}&title=${item.title}`">{{item.title}}</router-link>=====================================
#Detail.vue<template><ul><li>消息编号：{{id}}</li><li>消息内容：{{title}}</li></ul></template><script>exportdefault{
name:"Detail",
props:['id','title']}</script>router-link的replace属性
控制路由跳转时操作浏览器历史记录的模式
- push:追加历史记录(默认)
- replace:替换当前记录
开启
<router-link:replace="true"class="list-group-item"active-class="active"to="/about">About</router-link>
==============或者简写<router-linkreplaceclass="list-group-item"active-class="active"to="/about">About</router-link>编程式路由导航
不借助
<router-link>实现路由跳转
<button@click="push(item)">push</button><button@click="replace(item)">replace</button><script>
methods:{push(item){//参数和to里面的cathis.$router.push({
name:'xiangqing',
query:{
id: item.id,
title: item.title,}})},replace(item){this.$router.replace({
name:'xiangqing',
query:{
id: item.id,
title: item.title,}})}}</script>
========================================<button@click="back">后退</button><button@click="forward">前进</button><button@click="go">前进</button><script>
methods:{back(){this.$router.back();},forward(){this.$router.forward()},go(){this.$router.go(-1)}}</script>缓存路由组件
让不展示的路由组件保持挂载，不被销毁！
<keep-alive include="News">//include里面是【组件名】，不写默认对此处所有的路由生效<router-view></router-view></keep-alive>//缓存多个路由组件<keep-alive:include="['News','Message']">路由独占的生命周期钩子
捕获路由组件的激活状态
activated 路由组件被激活时触发
deactivated 路由组件失活时触发如果想要在被缓存数据的路由1组件中，激活一个定时器。当切走的时候，由于组件未被销毁，定时器还会执行，可使用deactivated销毁定时器路由守卫-全局前置
对路由进行权限控制
- 全局守卫
- 独享守卫
- 组件内守卫
全局守卫
const router=newVueRouter({...})//初始化时、每次路由切换之前被调用
router.beforeEach((to,from, next)=>{if(to.meta.isAuth){
console.log(to,from)}else{next()}})//初始化时、每次路由切换之后被调用
router.afterEach((to,from)=>{
document.title= to.name+from.name})exportdefault router独享守卫
beforeEnter(to,声明：本站所有文章，如无特殊说明或标注，均为网络收集发布。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。
