Vue是当前最热门的前端框架之一，它不仅简洁易用，而且具有强大的扩展性，其中一个值得关注的插件就是vue-router。vue-router是Vue官方路由插件，它可以更好地控制Vue应用中的路由导航，使路由与组件之间的关系更加清晰，提升了用户的交互体验。本文将详细解读Vue-router的使用方法及妙用。
一、安装和使用
在使用vue-router之前，需要先安装它。可以使用npm包管理器来安装vue-router插件。安装命令如下：
npm install vue-router
登录后复制
安装完成之后，在main.js文件中引入并使用vue-router：
import VueRouter from 'vue-router'
import routes from './router'
const router = new VueRouter({
routes
})
new Vue({
el: '#app',
router,
render: h => h(App)
})登录后复制
其中，routes参数指定路由配置，可以根据项目需要进行修改。然后在Vue实例化对象中传入router参数，启用路由功能。
二、基础配置
路由配置包含路由表和路由组件两个部分。路由表主要用于配置路由路径和相应的组件，路由组件是对应路由路径的组件视图。
在src目录下创建router.js文件，定义路由表和组件。如下：
import Home from './views/Home.vue'
import About from './views/About.vue'
export default [
{
path: '/',
name: 'home',
component: Home
},
{
path: '/about',
name: 'about',
component: About
}
]登录后复制
然后在main.js中引入路由配置，并传入VueRouter实例中。其中，路由路径使用path属性进行配置，component属性指定对应的路由组件。
三、参数传递
Vue-router还支持传递参数，可以通过$route对象获取到传递的参数。
- 路径传参
路径传参是指将参数放在路由路径的一部分，例如：
{
path: '/user/:userId',
name: 'user',
component: User
}登录后复制
当用户访问/user/1时，路由会将1作为参数userId传递给User组件。
- 查询参数传参
查询参数传参是指将参数以键值对的形式放在路由路径后，以问号?分隔，连续的键值对用&连接，例如：
{
path: '/user',
name: 'user',
component: User
}登录后复制
当用户访问/user?id=1&name=john时，路由会将{id: 1, name: 'john'}作为查询参数传递给User组件。
四、重定向和嵌套路由
- 重定向
重定向是指将用户在浏览器中访问某个路径时，自动跳转到另一个路径。如下代码实现了路径/about自动跳转到路径/home的功能：
import Home from './views/Home.vue'
import About from './views/About.vue'
export default [
{
path: '/',
redirect: '/home'
},
{
path: '/home',
name: 'home',
component: Home
},
{
path: '/about',
redirect: '/home'
}
]登录后复制
- 嵌套路由
嵌套路由是指在父组件中使用子组件的路由。例如，在头部和底部为固定结构的页面中，需要嵌套“内容”组件，三层结构看起来是这样的：
header
/
L R
|
content
|
footer登录后复制
嵌套路由需要在父组件内部使用标签来占位，并在父组件的路由表内部定义子路由表。例如：
const home = {
template: `
<div>
<h2>Home</h2>
<router-view></router-view>
</div>
`
}
const about = {
template: '<div>About</div>'
}
const contact = {
template: '<div>Contact</div>'
}
const router = new VueRouter({
routes: [
{
path: '/',
name: 'home',
component: home,
children: [
{
path: 'about',
name: 'about',
component: about
},
{
path: 'contact',
name: 'contact',
component: contact
}
]
}
]
})登录后复制
在home组件中使用了标签作为子组件“about”和“content”的占位符。在路由表中，父组件“home”配置的子路由表中包含了“about”和“content”两个子路由路径。
五、路由守卫
- 全局守卫
全局守卫会在路由切换前触发，其中beforeEach()为全局前置守卫，可以进行权限验证、登陆验证等操作。
router.beforeEach((to, from, next) => {
// 验证用户是否登陆
if(to.path === '/login') {
next();
} else {
let token = localStorage.getItem('token');
if(token === null || token === '') {
next('/login');
} else {
next();
}
}
})登录后复制
全局后置守卫用于路由切换后触发，用于处理页面加载的进度条等操作。
- 路由独享守卫
路由独享守卫用于针对某个路由做出特定的处理，在路由配置中添加beforeEnter属性定义即可。
const router = new VueRouter({
routes: [
{
path: '/admin',
name: 'admin',
component: admin,
beforeEnter: (to, from, next) => {
// 验证是否为管理员账户
let token = localStorage.getItem('token');
if(token === 'admin') {
next();
} else {
next('/');
}
}
}
]
})登录后复制
- 组件内守卫
组件内守卫主要用于对当前组件进行处理。包括：beforeRouteEnter，beforeRouteUpdate和beforeRouteLeave三个守卫函数。
beforeRouteEnter函数在组件进入之前触发，在该函数中无法直接访问组件实例，但可以通过next回调函数传递组件实例进行处理。
export default {
data () {
return {
user: {}
}
},
beforeRouteEnter (to, from, next) {
axios.get(`/api/user/${to.params.id}`).then(response => {
next(vm => vm.setUser(response.data.user))
})
},
methods: {
setUser (user) {
this.user = user
}
}
}登录后复制
beforeRouteUpdate函数由于组件之间的路由跳转不会重新创建实例，因此需要使用beforeRouteUpdate函数进行处理。
export default {
watch: {
'$route' (to, from) {
// 对路由变化作出响应...
}
},
beforeRouteUpdate (to, from, next) {
// react to route changes...
// don't forget to call next()
}
}登录后复制
beforeRouteLeave函数在组件即将被离开时触发，用于处理未保存的表单数据等操作。
export default {
beforeRouteLeave (to, from, next) {
// 如果表单已保存或者页面没有修改，直接离开该页面
if (this.saved || window.confirm('尚未保存，确定要离开吗？')) {
next()
} else {
next(false)
}
}
}登录后复制
六、总结
使用vue-router插件可以为Vue应用中的路由导航提供强大的控制能力，从而提升用户的交互体验。本文介绍了vue-router的基础配置、参数传递、重定向和嵌套路由及路由守卫等功能，可以帮助开发者更好地使用vue-router插件。
以上是Vue中使用vue-router的妙用详解的详细内容。更多信息请关注PHP中文网其他相关文章！
