路由模块封装
src文件夹 下新建 router文件夹，创建index.js文件
index.js写入相关代码(上述)
import My from '@/views/My.vue'
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter) //VueRouter插件初始化
const router = new VueRouter({
routes:[
{ path:'/find', component: Find },
{path:'/my',component:My },
]
})
// 导出
export default router
main.js 中导入
import router from './router/index'
ps：@为绝对路径表示，直接从src开始
声明式导航 - 导航链接
vue-router 提供了一个全局组件router-link(取代 a标签)
本质还是 a标签 ，指定路径属性为 to，无需#（to属性必须传入）
-
会提供两个高亮类名，可以直接设置高亮样式
<router-link to="/路径"></router-link>router-link-active
模糊匹配，如 to="my" 可以匹配 /my /my/a /my/b.....（两级导航栏，可以保持外面那层高亮）-
router-link-exact-active
精确匹配 ，如 to="my" 只可以匹配 /my
-
定制两个高亮类名
const router = new VueRouter({ linkActiveClass:"类名1", linkExactActiveClass:"类名2" })
声明式导航 - 跳转传参
查询参数传参
<router-link to="/路径?参数名=值"> </router-link>-
对应页面组件 接受传递过来的值
// 模板中 $route.query.参数名 // js中还需加上this this.$route.query.参数名
动态路由传参
-
配置动态路由
const router= new VueRouter({ routes:[ ..., { path:'/search/:参数名', component: } ] }) -
配置导航链接
<router-link to="/路径/参数值"> </router-link> -
对应页面直接接受传递过来的值
$route.params.参数名 // js中还需加上this this.$route.params.参数名 -
可选符
配了路由path："/search/:words”不传参数时会未匹配到组件，显示空白。
原因：/search/:words表示，必须要传参数。如果不传参数，也希望匹配，可以加个可选符"？"
const router= new VueRouter({ routes:[ ..., { path:'/search/:参数名?', component: } ] })
两种传参方式区别
-
查询参数传参（比较适合传多个参数）
to="/path?参数名=值&参数名2=值" 动态路由传参(优雅简洁，传单个参数比较方便)
vue路由 - 重定向
匹配指定path后，强制跳转新path路径
url默认是／路径，未匹配到组件时，会出现空白
{path:匹配路径,redirect:重定向到的路径},
const router= new VueRouter({
routes:[
...,
{ path:'匹配路径',redirect:'重定向到的路径'},
]
})
vue路由 - 404
兰当路径找不到匹配时，给个提示页面
写一个404组件，导入组件
位置：配在路由最后,前面不匹配就命中最后这个
const router= new VueRouter({
routes:[
...,
{ path:'*',component:NotFind},
]
})
Vue路由-模式设置
hash路由(默认) 例如:http://localhost:8080/#/home
history路由(常用) 例如：http://localhost:8080/home(以后上线需要服务器端支持)
const router = new VueRouter({
routes,
mode: "history"
})
// 配置后就采用了 history 模式，地址栏没有#，需要后台配置访问规则
编程式导航－基本跳转
编程式导航：用 JS 代码来进行跳转
问题：点击按钮跳转如何实现？
-
path 路径跳转（简易方便）
this.$router·push('路由路径') //完整写法 this.$router.push({ path：'路由路径' }) -
name 命名 路由跳转（适合 path 路径长的场景）
- 命名
const router = new VueRouter({ routes:[ name:'路由名'，path:'/path/xxx',component: xxx ] })- 跳转
this.$router.push({ name:'路由名' })
编程式导航 - 路由传参
-
path路径跳转传参
-
query传参
this.$router.push('路由路径?参数名=参数值') // 完整写法 this.$router.push({ path：'路由路径' query:{ 参数名：参数值， 参数名：参数值 } })对应页面直接接受传递过来的值（上述）
$route.params.参数名
-
-
动态路由传参
配置动态路由（上述）
const router= new VueRouter({ routes:[ ..., { path:'/search/:参数名', component: } ] })对应页面直接接受传递过来的值（上述）
$route.params.参数名传参
this.$router.push('/search/${参数值}') // 完整写法 this.$router.push({ path:'/search/${this.inpValue}' })
-
name 命名路由 跳转传参
-
query 传参
this.$router.push({ name：‘路由名字', query: { 参数名1：'参数值1', 参数名2：'参数值2', } }) -
动态路由传参
this.$router.push({ name：'路由名字', params:{ 参数名：'参数值', } })二级路由
-
通过children 配置项，可以配置嵌套子路由
-
在children配置项中，配规则
const router= new VueRouter({ routes:[ path:'' component: //在这个组件上写二级路由的出口 children:[ { path:'' component: } ] ] }) -
准备二级路由出口
<router-view></router-view>一级的出口是写在app.vue上的
二级的出口写在一级组件上
$route.back() 返回
需要在发请求和数据渲染完成前不加载元素，可以使用 v-if 判断数据是否存在，再做渲染
缓存组件
keep-alive是Vue 的内置组件，当它包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们
keep-alive 是一个抽象组件：它自身不会渲染成一个 DOM 元素，也不会出现在父组件链中。
优点：
在组件切换过程中把切换出去的组件保留在内存中，防止重复渲染DOM，减少加载时间及性能消耗，提高用户体验性。
<keep-alive>
<组件></组件>
</keep-alive>
属性：
include ：组件名数组，只有匹配的组件会被缓存.
exclude ：组件名数组，任何匹配的组件都不会被缓存
-
max：最多可以缓存多少组件实例
（注意是 组件名，如果没有配置name，才会找文件名作为组件名）
组件被缓存后，不触发八个生命周期钩子，但会多两个新钩子
- actived 激活时，组件被看到时触发
- deactived 失活时，离开页面组件看不见时触发
