332 lines
4.9 KiB
Markdown
332 lines
4.9 KiB
Markdown
### 安装 vue-router
|
||
|
||
yarn add vue-router
|
||
|
||
### 准备：用vue-cli 新建文件
|
||
|
||
1.终端打开你当前目录 vue create +项目名
|
||
|
||
2.把 src/App.vue 文件重写为空白模板
|
||
|
||
3.在src/components目录下新建两个组件（a,b）
|
||
|
||
4. 在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.route.push("页面路由")//路由后面可以直接用?参数名=参数值传参
|
||
|
||
2.route.push({path:"页面路由",query:{参数名:参数值})
|
||
|
||
3.route.push({name:"定义的路由的name值",params:{参数名：参数值})
|
||
|
||
|