Vue 路由
安装命令
1vue add router
在生成的router.js中 配置使用router，
1//会在vue的实列中添加$router
2Vue.use(Router);
路由模式hash和history
hash带有#号history不带
使用方式
1export default new Router({
2 mode:'history'
3})
页面使用
1<div id="app">
2 <div id="nav">
3 <router-link to="/">Home</router-link> |
4 <router-link to="/about">About<router-link>
5 </div>
6 <router-view />
7</div>
router link 一定要有to属性，否则页面不渲染
router-link to 后面也可以写对象
1<router-link :to="{path:'/'}"></router-link>
还可以根据name来跳转
1<router-link :to="{name:'home'}"></router-link>
router-link可以通过tag指定标签
1<router-link tag="li" to="/"></router-link>
router-link 渲染到页面，class默认属于路由包含关系会增加router-link-active，如果当前页面和路由一样，会增加一个,router-link-exact-active样式。
比如路由地址是/learn/aaa，那么
/
/learn
/learn/aaa
上面三个属于路由包含的关系， 所以没个router-link都会增加一个
classrouter-link-active.当前页面/learn/aaa. 会再增加一个 router-link-exact-active
如果觉得router-link-exact-active 太长，可以在router.js中配置
1export default new Router({
2 linkExactActiveClass:'active-exact'
3})
修改后页面渲染的是active-exact，可以在css中对其进行样式的修改。
还可以对router-link-active进行配置
1export default new Router({
2 linkActiveClass:'active'
3})
二级路由的配置
1{
2 path: '/community',
3 name: 'community',
4 component: () => import('./views/Community'),
5 //在children中写子路由
6 children: [
7 {
8 //配置在children中的子路由， 不需要加斜杠，会向上找父路由
9 path: 'academic',
10 name: 'academic',
11 component:() => import('./views/academic')
12 },
13 {},
14 {},
15 //这里...表示更多，没有实际意义，实际使用不可以用...
16 ...
17 ]
18}
页面还是一样添加router-link 和router-view在对应的组件中添加
redirect路由重定向
比如路由到某个页面，这个页面有多个二级路由，那么默认重定向到第一个，可以在父路由中配置
1{
2 path: '/community',
3 name: 'community',
4 component: () => import('./views/Community'),
5 redirect: '/community/academic'
6}
一级路由高亮显示
当增加二级路由的时候， 路由根原来是不同的，比如原来是
/community,
增加了二级路由后， 当点击一级路由，然后重定向到了二级路由的第一个子页面那么，原来的
/community 会变成 /community/academic 导致一级路由改变，那么页面上原来增加的 active的样式
不会作用到一级路由。
增加二级路由，一级不高量解决方案1
- 对包含路由关系的 active样式进行修改，修改后根目录会被包含进去， 因为根目录是
/,其他路由都包含斜杠 - 在router.js配置根目录
/为/home，这样处理，那么根目录将不会被路由包含进去 - 根路径改变，导致不会主动跳转到
/home，需要做一个重定向处理 - 在router.js中增加重定向配置
1routes:[
2 {
3 path: '/',
4 redirect: '/home'
5 }
6]
解决方案2
1{
2 path: '*',
3 redirect(to) {
4 if(to.path === '/') {
5 return '/home'
6 }else { //配置错误路由页面
7 return '/notFound'
8 }
9 }
10}
错误路由页面配置
1{
2 path: '/notFound',
3 component: () => import('./views/notFound')
4}
页面点击路由跳转$router.push
1methods: {
2 handleClick() {
3 this.$router.push('/home')
4 }
5}
$router.replace
1methods: {
2 handleClick() {
3 this.$router.replace('/home')
4 }
5}
replace和push的区别
- 路由跳转会生成一个栈
- push是添加一个路由，通过浏览器回退，到push前的那个地址
- replace是替换当前路由， 替换新的路由地址，通过浏览器回退，将不会回退到之前路由地址
push [a ,b, c, d] ==> [a, b, c, d, e]
replace[a, b, c, d] ==> [a, b, c, e]
$router.go
1this.$router.go(-1); //通过后面的数字，可以在前进， 后退指定数字在栈中对应的路由地址
动态路由
1{
2 path: '/question/:id'
3 name: 'question',
4 component: () => import('./views/question')
5}
在router-link中配置使用
1<router-link
2 tag="li"
3 :to="{name:'question',params:{id:question.questionId}}"
4 v-for="question in questionList"
5 :key="question.questionId"
6>
7</router-link>
8
⚠️⚠️⚠️使用动态路由的时候:to后面只能接name， 不能用path，否则报找不到
动态路由的参数获取
打印this.$router可以看到对象里面有一个params 里面可以拿到传递的参数
🚬每天分享一点点， 欢迎大家讨论， 共同学习， 有不对的地方，欢迎指出🚬
