1.项目中引入
1.1 安装注册
1.2 封装抽离
在main.js中 书写,会造成单个js文件过于臃肿的情况,需要将路由配置部分抽离出来,在src下新建router文件夹,新建index.js文件
import Vue from 'vue'
import VueRouter from 'vue-router'
import HomeView from '../views/HomeView.vue'
import myMap from '../views/mymap.vue'
Vue.use(VueRouter)
const routes = [
{
path: '/',//路由重定向
name: 'home',
component: HomeView
},
{
path: '/mymap',
name: 'myMap',
component: myMap
},
]
const router = new VueRouter({
//mode: 'history' //不写就是默认哈希模式,写了就是历史模式
base: '/test/', //nginx部署时需要的配置项
routes
})
export default router
通过export default 将router实例导出,再带入到main.js中
1.3 路由懒加载
其中可以采用路由懒加载的写法去加载页面,提高页面初始化速度
{
path: '/about',
name: 'about',
component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
},
- component 是路由配置中的一个字段，用于指定当前路由的组件。
- () => import(‘path/to/component’) 是 ES6 中的箭头函数语法，用于定义一个动态导入，意味着在需要时才会加载对应的组件。
- /* webpackChunkName: “about” */ 是 webpack 的注释语法，用于为动态导入的文件指定一个 chunk 名称，以便在构建时生成对应的代码块。
- ‘…/views/AboutView.vue’ 是要动态导入的组件的路径。
2. 路由层级
项目中的路由层级基本不会超过三级,以一个demo示例
const router = new VueRouter({
routes: [
{
path: '/',
component: MainLayout,
children: [
{
path: '',
component: Home
},
{
path: 'about',
component: About
},
{
path: 'products',
component: Products,
children: [
{
path: 'detail/:id',
component: ProductDetail
}
]
}
]
},
{
path: '/login',
component: Login
}
]
})
3.路由跳转/传参
3.1 声明式导航
//跳转到配置的路径为'/index'的页面
<router-link to="/index">点我跳转</router-link>
3.1.1query参数传递
//A页面查询参数传递
<router-link to="/index?words=123">点我跳转</router-link>
//B页面接收参数
console.log(this.$route.query.words, 'message')//打印结果123 message
//动态传递query参数,A页面
<router-link :to="{name:'weChat',query:{message:message}}">去聊天室</router-link>
//接收数据,B页面
console.log(this.$route.query.message, 'message')
3.1.2 params参数传递
//A页面传参
<router-link :to="{name:'weChat',params:{message:message}}">去聊天室</router-link>
//B页面接收参数
console.log(this.$route.params.message, 'message')
3.2 编程式导航
3.2.1 根据path传参传递query数据
//A页面传参
todoSomething () {
this.$router.push({
path: '/weChat',
query: {
id: this.message
}
})
}
//B页面接收
console.log(this.$route.query.id, 'message')
3.2.2 根据path传参传递params数据(不推荐)
在实际使用中，通过 path 传递参数时，并不能直接在目标页面的组件中通过 $route.params 获取到参数值，因为 path 传递参数是基于路由配置中动态参数的匹配，而非通过 params 属性传递参数。
//路由配置
{
path: '/weChat/:id',
name: 'weChat',
component: weChat
}
//A页面传参
todoSomething () {
const id = this.message
this.$router.push({
path: `/weChat/${id}`,
})
}
//B页面接收
console.log(this.$route.params.id, 'message')
3.2.3 根据name传参传递query数据
//A页面传参
todoSomething () {
this.$router.push({
name: 'weChat',
query: {
id: this.message
}
})
}
//B页面接收
console.log(this.$route.query.id, 'message')
3.2.4 根据name传参传递params数据
//A页面传参
todoSomething () {
this.$router.push({
name: 'weChat',
params: {
id: this.message
}
})
}
//B页面接收
console.log(this.$route.params.id, 'message')
4. router与route
$router 对象：代表 Vue Router 实例，可以用来导航到不同的路由。
我们可以通过$router.push()$router.replace()、$router.go() 等方法来控制路由跳转。
通常在组件内部通过 this.$router 来访问该对象。
$route 对象：代表当前活跃的路由对象，可以用来访问当前路由的信息。例如当前路径、参数、查询参数等。
我们可以通过 $route.path、$route.params、$route.query 等属性来获取当前路由的信息。
通常在组件内部通过 this.$route 来访问该对象。
5.动态添加路由
// 定义要添加的路由
const newRoute = {
path: '/new-route',
component: () => import('./components/NewRoute.vue')
}
// 在 Vue Router 中添加新路由
router.addRoute(newRoute)
6.路由导航守卫
在 Vue Router 中，一共有三种类型的导航守卫：
1.全局前置守卫（beforeEach）：在路由切换之前调用，可以用来进行全局权限验证等操作。
2.全局解析守卫（beforeResolve）：在路由被解析之后，组件被激活之前调用，可以用来做一些全局的前置操作。
3.全局后置守卫（afterEach）：在路由切换完成之后调用，可以用来执行一些后续操作，如页面统计等。
router.beforeEach((to, from, next) => {
// 在这里进行权限验证等操作
if (判断) {
next('/login')
} else {
next()
}
})
