- 理解： 一个路由（route）就是一组映射关系（key - value），多个路由需要路由器（router）进行管理。
- 前端路由：key是路径；value是
组件component，用于展示页面内容。当浏览器的路径改变时, 对应的组件就会显示 - 后端路由：key是路径；value是
函数function，用于处理客户端提交的请求。服务器接收到一个请求时, 根据请求路径找到匹配的函数 来处理请求, 返回响应数据 - vue-router 的理解：vue 的一个插件库，专门用来实现 SPA 应用
1.基本使用
-
安装vue-router，命令：
npm i vue-router -
使用:
//src/router/idnex.js 中 // 1.引入Vue import Vue from 'vue' //2.引入VueRouter import VueRouter from 'vue-router' //3.应用插件 Vue.use(VueRouter) //4.引入需要对应路径展示的组件 import About from '../components/About' import Home from '../components/Home' //5. 定义路由规则 const routes =[{ name:'about', // 路由名称 path:'/about', // 跳转路径 component:About // 路径对应的组件 },{ name:'home', path:'/home', component:Home }] //6.创建router实例对象，去管理一组一组的路由规则 并向外共享实例 export default new VueRouter({ routes, }) // main.js中 //引入路由器 import router from './router' // 在Vue实例上挂载路由 new Vue({ router, // 挂载路由 render: (h) => h(App), }).$mount('#app'); 复制代码 -
指定组件展示位置
<router-view></router-view> 复制代码
2.多级路由（嵌套路由）
-
配置路由规则，使用children配置项：
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> 复制代码
3. 路由导航
3.1声明式导航 - 基础使用
- vue-router提供了一个全局组件 router-link
- router-link实质上最终会渲染成a链接 to属性等价于提供 href属性(to无需#) 属性值填上要跳转的路径字符
- router-link提供了声明式导航高亮的功能(自带类名is-active)
<template>
<div>
<div class="footer_wrap">
<router-link to="/about">about组件</router-link>
<router-link to="/home">home组件</router-link>
</div>
<div class="top">
<router-view></router-view>
</div>
</div>
</template>
<script>
export default {};
</script>
<style scoped>
/* 省略了 其他样式 */
.footer_wrap .router-link-active{
color: white;
background: black;
}
</style>
复制代码总结: 链接导航, 用router-link配合to, 实现点击切换路由
3.2 路由编程式导航
-
作用：不借助
<router-link>实现路由跳转，配合js的编程式导航跳转 (利用$route.push()) -
具体编码：
<template> <div> <span @click="btn1">发现音乐</span> <span @click="btn2">我的音乐</span> <div class="top"> <router-view></router-view> </div> </div> </template> <script> export default { methods: { btn1(){ // 方式1: path跳转 当有多个路由层级时 需要写上每一层的路由路径 this.$router.push('/home') }, btn2(){ // 方式2: name直接跳转 this.$router.push('about') } } }; </script> //$router中的其他几个API this.$router.forward() //前进 请求(返回)上一个记录路由 this.$router.back() //后退 this.$router.go() //可前进也可后退 go中要传一个参数，n/-n表示向前/后跳转n个页面 //this.$router.go(-1): 请求(返回)上一个记录路由 //this.$router.go(1): 请求下一个记录路由 复制代码
几个注意点:
1.通过切换，“隐藏”了的路由组件，默认是被销毁掉的，需要的时候再去挂载。
2.每个组件都有自己的$route属性，里面存储着自己的路由信息（每个组件都有$route属性，是不一样的）。
3.整个应用只有一个router，可以通过组件的$router属性获取到（每个组件都有$router属性，不过是同一个）。
4路由跳转传参
4.1.路由的query参数
-
传递参数(加个'?x=xxx&y=yyy')
<!-- 声明式导航跳转传参:--> <!-- 跳转并携带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> <!-- 编程式导航跳转传参--> <script> export default { methods: { btn1(){ // 方式1: path和query跳转 this.$router.push({ path:'/about', query:{ id:666, title:'你好' } }) }, // 方式2:name和query btn2(){ this.$router.push({ name:'about', query:{ id:666, title:'你好' } }) } } }; </script> 复制代码 -
接收参数：(跳转的组件中)
$route.query.id $route.query.title 复制代码<li>消息编号：{{$route.query.id}}</li> <li>消息标题：{{$route.query.title}}</li> 复制代码
5.路由的params参数
-
配置路由，声明接收params参数
{ 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> <!-- 编程式导航跳转传参--> <script> export default { methods: { btn1(){ // 方法: name和params跳转 this.$router.push({ name:'about', params:{ id:666, title:'你好' } }) }, } }; </script> 复制代码特别注意：路由携带params参数时，则不能使用path配置项，必须使用name配置！
-
接收参数：
$route.params.id $route.params.title 复制代码
6.路由的props配置
官网上的一段话---->
在组件中使用 $route 会使之与其对应路由形成高度耦合，从而使组件只能在某些特定的 URL 上使用，限制了其灵活性。 使用 props 将组件和路由解耦 , 意思就是最好不要在组件中像这样使用传入的值:$route.params.id.....
{
name:'about',
path:'/about',
component:About,
//第一种写法：props值为对象，该对象中所有的key-value的组合最终都会通过props传给Detail组件，值是死的
// props:{a:900}
//第二种写法：props值为布尔值，布尔值为true，则把路由收到的所有params参数通过props传给Detail组件 (这种方式只会管理params参数 query参数无效)
// props:true
//第三种写法：props值为函数，该函数返回的对象中每一组key-value都会通过props传给Detail组件
props($route){ // 接收到的参数就是$route 参数写成{query}解构形式也可以
return {
id:$route.query.id,
title:$route.query.title
}
}
}
// props配置完后在组件内用props接收传入的值
// About组件中:
<script>
export default {
props:['id','title']
}
<script>
复制代码配置好props后在组件中直接使用props:['id','title'] 接收的值 ----> {{id}},{{title}}就好了
7.缓存路由组件
-
作用：让不展示的路由组件保持挂载，不被销毁。
-
具体编码：
<!-- 缓存一个路由组件 --> <keep-alive include="News"> <router-view></router-view> </keep-alive> <!-- 缓存多个路由组件 --> <!-- <keep-alive :include="['News','Message']"> --> 复制代码 -
用
<keep-alive>包裹要保持挂载的路由组件的展示区<router-view>，include里写的是组件名，表示要让哪个组件保持挂载，不写include就表示该展示区的所有路由组件都保持挂载，在切换路由组件时不被销毁
8.两个新的生命周期钩子
- 作用：路由组件所独有的两个钩子，用于捕获路由组件的激活状态。
- 具体名字：
activated路由组件被激活时触发。(比如从别的路由组件切换到当前路由组件)deactivated路由组件失活时触发。(比如从当前路由组件切走)
10.路由器的两种工作模式(mode配置项)
- 对于一个url来说，什么是hash值？—— #及其后面的内容就是hash值。
- hash值不会包含在 HTTP 请求中，即：hash值不会带给服务器。
- hash模式：
- 地址中永远带着#号，不美观 。
- 若以后将地址通过第三方手机app分享，若app校验严格，则地址会被标记为不合法。
- 兼容性较好。
- history模式：
- 地址干净，美观 。
- 兼容性和hash模式相比略差。
- 应用部署上线时需要后端人员支持，解决刷新页面服务端404的问题。npm网站中的插件connect-history-api-fallback可以解决这个问题
2769
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
