5.0 KiB
安装 vue-router
yarn add vue-router
准备：用vue-cli 新建文件
1.终端打开你当前目录 vue create +项目名
2.把 src/App.vue 文件重写为空白模板
3.在src/components目录下新建两个组件（a,b）
- 在src/main.js 里引入 vue-router
import VueRouter from 'vue-router'
注册使用：
Vue.use(VueRouter)
正式使用 vue-router
1.在src/main.js中 定义 路径及映射的组件
const routes= [
{ path: "/a", component: aa },
{ path: "/b", component: bb },
]
2.实例化 VuRouter
const router = new VueRouter({
routes // (缩写) 相当于 routes: routes
})
3.渲染 （1） 在src/main.js中
new Vue({
el: '#app',
router,
render: h => h(App)
})
（2） 在src/app.vue 中 的id为 app 的div内部写入 router-view标签
<template>
<div id="app">
<router-view></router-view>
</div>
</template>
全部代码：
app.vue
<template>
<div id="app">
<router-view></router-view>
</div>
</template>
<script>
</script>
<style>
</style>
main.js
import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router'
import aa from "./components/a.vue";
import bb from "./components/b.vue";
Vue.use(VueRouter)
Vue.config.productionTip = false
const routes= [
{ path: "/a", component: aa },
{ path: "/b", component: bb },
]
const router = new VueRouter({
routes // (缩写) 相当于 routes: routes
})
new Vue({
el: '#app',
router,
render: h => h(App)
})
a.vue
<template>
<div class="hello">
<div>这是aaa</div>
</div>
</template>
<script>
export default {
name: 'aa',
}
</script>
<style scoped>
</style>
b.vue (组件b)
<template>
<div>
<div>这是bbb</div>
</div>
</template>
<script>
export default {
name:"b"
}
</script>
<style>
</style>
vuerouter 动态路由匹配
1.定义： 把匹配到的部分或全部路由，全都映射到一个组件
2.使用： 动态路径参数 用: 开头
（1）在main.js 的路由定义中：
{ path: "/a", component: aa },
修改为：
{ path: "/a/:参数名", component: 映射的组件名 },
（2） 在映射的组件中获取传入的动态参数的值
在引入的组件中 使用 {{ $route.params.参数名}} 获取参数的值
2.注： 当使用路由参数时，映射的组件会重复使用，都渲染相同组件，比起销毁再创建，速度会更快
但是，组件挂载的事件不会重复调用
如果要检测页面跳转，只能用watch 监听 $route对象或者使用beforeRouteUpdate 导航守卫
导航守卫
1.全局导航守卫
（1） 在 main.js中的 导出模块里 通过watch 监听 $route 对象
new Vue({
el: '#app',
router,
watch:{
'$route'(){
window.console.log("aaa")
}
},
render: h => h(App)
})
(2) 定义route.beforeEach
router.beforeEach((to,from,next)=>{
.....
next()
})
to:即将进入的页面信息
from 当前正要离开的页面信息
next 进行管道中的下一个钩子
如果是 next(false), 中断当前的导航
2.路由独享的 导航守卫
在main.js中的 routes 路由定义：
const routes= [
{ path: "/a", component: aa },
{ path: "/b", component: bb },
]
把 { path: "/a", component: aa },改成：
{
path: "/b",
component: bb,
beforeEnter:(to,from,next)=>{
window.console.log("aaassjlfml;")
next()
}
},
3.组件内的 导航守卫
在组件内的 导出模块中声明 beforeRouteEnter，beforeRouteUpdate，beforeRouteLeave 参数都是 from,to,next
beforeRouterEnter: 进入该组件的时候调用
beforeRouteUPdate :路由改变呢重用组件的时候调用
beforeRouteLeave ： 离开该组件的时候调用
eg:
export default {
name: 'aa',
beforeRouteEnter (to, from, next) {
window.console.log("组件里的")
next()
},
}
###嵌套路由
1.定义所需要渲染的组件（c,d）
2.在父组件内部的template中加入 router-view标签
3.在main.js 中声明 路由的地方 把 { path: "/b", component: bb },改成:
{
path: "/b",
component: bb,
children:[
{path:"路由名",component:"映射的组件名"}
……
]
},
4.访问时 的路径 ： localhost:8080/#/父路由名/子组件名
全部代码(仅展示 routes 即路由定义部分)
const routes = [
{ path: "/a/:id", component: aa },
{
path: "/b",
component: bb,
// beforeEnter:(to,from,next)=>{
// window.console.log(to,"aaassjlfml;")
// next()
// },
children: [
// {path:'/',component:bb},
{path:'c',component:c},
{path:'d',component:d},
]
},
]
route.push()页面跳转及传参
1.页面跳转：
（1）route.push("页面路由")//路由后面可以直接用?参数名=参数值传参
（2）route.push({path:"页面路由",query:{参数名:参数值})
（3）route.push({name:"定义的路由的name值",params:{参数名：参数值})
2.接收参数
（1） query 和 ？参数名=参数值: {{$route.query.cansh}}