vue-router路由的安装、配置、具体用法和Vue-router学习笔记
官网:
安装 | Vue RouterVue.js 的官方路由https://router.vuejs.org/zh/installation.html#直接下载-cdn
vue-router的基本用法
具体步骤:
安装vue-router
npm install vue-router --save-dev
第一步:通过import引入vue、vue-router
router/index.js
//引入vue import Vue from 'vue'; //引入vue-router import Router from 'vue-router'; //全局使用vue-router插件 Vue.use(Router);
第二步:定义(路由)组件
router/index.js
//定义路由组件 import Home from '../pages/Home.vue'; import My from '../pages/My.vue';
第三步:定义路由,具体用法
router/index.js
//定义路由
const routes = [
{
path:'/home/:name/:id',
component:Home
},
{
path:'/my/:name/:id',
component:My
}
]
第四步:创建router实例
router/index.js
//创建router实例
const router = new Router({
routes
});
//默认输出router
export default router;
第五步:在vue实例上挂载router实例
main.js
//引入
import Vue from 'vue';
import router from './router';
import App from './App.vue';
//实例
new Vue({
router,//挂载router实例
render:h => h(App)
}).$mount('#app');
第六步:通过router-link组件来导航,具体用法
Footer.vue
<template>
<footer>
<ul>
<li>
<router-link to="/home/首页/100">首页</router-link>
</li>
<li>
<router-link to="/my/我的/200">我的</router-link>
</li>
</ul>
</footer>
</template>
第七步:用router-view组件定义路由出口,路由匹配到的组件内容将渲染到这里,具体用法
App.vue
<template>
<div id="app">
<Header/>
<section class="mainContainer">
<router-view/>
</section>
<Footer/>
</div>
</template>
简单的路由配置完成。
Vue-router学习笔记
# Vue-router学习笔记
标签(空格分隔): vue 前端开发
---
## 1. 起步
+ 下载
- npm i vue-router -S
+ 安装
- import VueRouter from 'vue-router'
- Vue.use(VueRouter)
+ 使用
```<body>
<div id="app">
<router-view></router-view>
</div>
<script>
let home = {
template: `
<div><h1>home页面</h1></div>
`
}
const router = new VueRouter({
routes: [
{path:'/home', component: home},
{path: '/',redirect: '/home'}
]
})
const vm = new Vue({
el: '#app',
data: {},
methods: {
},
router
})
</script>
```
## 2. 进阶
### 1.路由嵌套
```
const router = new VueRouter({
routes: [
{
path:'/home',
component: home,
children: [//注意:子路由前面不能加'/'路径router-link的to属性引用时,必须写全路径'/home/homeson'
{path: 'homeson',component: homeson}
]
},//redirect 重定向
{path: '/',redirect: '/home'}
]
})
```
### 2. 路由视图
+ 当一个路由需要同时指定多个组件渲染规则时,应用命名的方式来指定相应的渲染规则
```
<div id="app">
<router-view></router-view>
<router-view name="top"></router-view>
<router-view name="left"></router-view>
<router-view name="right"></router-view>
</div>
<script>
{
path: '/index',
components: { //注意,这里是components而不是component
default: com0,
top: com1,
left: com2,
right: com3
//键是router-view的name属性值,值是指定该router-view渲染哪个组件(注意,当键为default时,默认没有设定name属性的router-view将会渲染该键对应的组件)
}
}
</script>
```
### 3. 重定向、别名、路由组件传参
+ 重定向
```
routes: [//redirect 接收三种写法的参数 当访问路由'/a'时会自动跳转到路由'/b'
{ path: '/a', redirect: '/b' },
{ path: '/a', redirect: { name: 'foo' }},
{ path: '/a', redirect: to => {
// 方法接收 目标路由 作为参数
// return 重定向的 字符串路径/路径对象
}}
]
```
+ 别名
```
routes: [
// '/a'的别名为'/b'意味着,当访问路由'/b'时,会按照/a的匹配规则来操作'/b'也就是'/a'的小名
{ path: '/a', component: A, alias: '/b' }
]
```
+ 路由组件传参
```
//在组件中使用 $route 会使之与其对应路由形成高度耦合,从而使组件只能在某些特定的 URL 上使用,限制了其灵活性。const User = {
template: '<div>User {{ $route.params.id }}</div>'
}
const router = new VueRouter({
routes: [
{ path: '/user/:id', component: User }
]
})
//
```
+ 通过 props 解耦
```
const User = {
props: ['id'],
template: '<div>User {{ id }}</div>'
}
const router = new VueRouter({
routes: [
{ path: '/user/:id', component: User, props: true },
//对于包含命名视图的路由,你必须分别为每个命名视图添加 `props` 选项:
{
path: '/user/:id',
components: { default: User, sidebar: Sidebar },
props: { default: true, sidebar: false }
}
]
})
```
### 4. 导航守卫
#### 4.1 全局守卫
+ 1.全局前置守卫
```
router.beforeEach (to, from, next) => {
// to 要去的路由对象 from要离开的路由对象 next 一个钩子函数,执行效果依赖next的参数--->next()执行下一个钩子函数,若钩子函数执行完毕,导航状态就是确认的(进行原本的跳转行为)
//next(false)中断当前导航 next('/')或next({path:'/'})跳转到新的导航,当前导航终止
//next(error) 如果传入 next 的参数是一个 Error 实例,则导航会被终止且该错误会被传递给 router.onError() 注册过的回调。
}
```
+ 2.全局解析守卫
```
//在 2.5.0+ 你可以用 router.beforeResolve 注册一个全局守卫。这和 router.beforeEach 类似,区别是在导航被确认之前,同时在所有组件内守卫和异步路由组件被解析之后,解析守卫就被调用。
```
+ 3.全局后置钩子
```
router.afterEach((to, from) => {
// 和守卫不同的是,这些钩子不会接受 next 函数也不会改变导航本身
})
```
#### 4.2 路由独享的守卫
+ 你可以在路由配置上直接定义,这些守卫与全局前置守卫的方法参数是一样的。
```
const router = new VueRouter({
routes: [
{
path: '/foo',
component: Foo,
beforeEnter: (to, from, next) => {
// ...
}
}
]
})
```
#### 4.2 组件内的守卫
+ 最后,你可以在路由组件内直接定义以下路由导航守卫
- beforeRouteEnter
- beforeRouteUpdate
- beforeRouteLeave
```
const Foo = {
template: `...`,
beforeRouteEnter (to, from, next) {
// 在渲染该组件的对应路由被 confirm 前调用
// 不!能!获取组件实例 `this`
// 因为当守卫执行前,组件实例还没被创建,不过,你可以通过传一个回调给 next来访问组件实例。在导航被确认的时候执行回调,并且把组件实例作为回调方法的参数。
},
beforeRouteUpdate (to, from, next) {
// 在当前路由改变,但是该组件被复用时调用
// 举例来说,对于一个带有动态参数的路径 /foo/:id,在 /foo/1 和 /foo/2 之间跳转的时候,
// 由于会渲染同样的 Foo 组件,因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
// 可以访问组件实例 `this`
},
beforeRouteLeave (to, from, next) {
// 导航离开该组件的对应路由时调用
// 可以访问组件实例 `this`
}
}
```
### 完整的导航解析流程
1. 导航被触发。
2. 在失活的组件里调用离开守卫。
3. 调用全局的 beforeEach 守卫。
4. 在重用的组件里调用 beforeRouteUpdate 守卫 (2.2+)。
5. 在路由配置里调用 beforeEnter。
6. 解析异步路由组件。
7. 在被激活的组件里调用 beforeRouteEnter。
8. 调用全局的 beforeResolve 守卫 (2.5+)。
9. 导航被确认。
10. 调用全局的 afterEach 钩子。
11. 触发 DOM 更新。
12. 用创建好的实例调用 beforeRouteEnter 守卫中传给 next 的回调函数。
参考资料:
相关文章
- Vue_(Router路由)-vue-router路由的基本用法
- 【华为云技术分享】三大前端技术(React,Vue,Angular)探密(下)
- Vue双向数据绑定原理分析(转)
- vue.config.js
- vue-router+vuex实现加载动态路由和菜单
- vue 实现动态路由
- vue框架-基础2-vue生命周期
- vue-resourse简单使用方法
- [Vue @Component] Load Vue Async Components
- [Vue-rx] Switch to a Function which Creates Observables with Vue.js and Rxjs
- vue.js 3.2.22:多选上传图片带缩略图可删除
- vue-router+vuex实现加载动态路由和菜单
- vue-router路由示例
- Vue 3 Composition API,你真的需要吗?
- vue+elementui 项目el-menu导航栏实现路由跳转及当前项的设置
- 怎样给vue项目重命名?怎样修改vue项目的title标题?vuejs项目:路由跳转时更改页面title名称
- vue 页面刷新还在当前路由
- Vue学习之--------路由的query、params参数、路由命名(3)(2022/9/5)
- Vue中、参数传递以及重定向
- vue v-if与v-show使用注意问题
- 前端MVC Vue2学习总结(八)——Vue Router路由、Vuex状态管理、Element-UI
- vue-router(二)后代路由
- Vue前端路由
- 087:vue+openlayers 地图中某位置闪烁点动画 (示例代码)
- vue中一个组件导入另一个组件