详解Vue路由
Vue.js是一个基于Web的JavaScript框架，它被广泛用于现代web应用程序的构建中。Vue使用可复用的组件和可组合的组件模式来构建用户界面，其中Vue路由是其中一个核心功能。在这篇文章中，我们将会详细介绍如何使用Vue路由构建单页应用程序。
什么是Vue路由？
Vue路由是Vue.js框架提供的一种官方解决方案，用于将不同URL对应到不同的Vue组件中。Vue路由是一种让单页应用程序更易于管理的方式，它使用户可以在单页应用程序中浏览不同的页面，同时也允许用户以一种非常自然的方式对页面进行切换。
安装Vue路由
Vue.js框架默认不包含Vue路由，需要单独安装。可以使用npm或yarn安装：
# 使用npm
npm install vue-router
# 使用yarn
yarn add vue-router
配置Vue路由
在Vue应用程序中使用Vue路由需要进行配置。首先，在Vue应用程序的入口文件中导入Vue路由：
import Vue from 'vue';
import VueRouter from 'vue-router';
Vue.use(VueRouter);
然后，定义Vue路由器：
const router = new VueRouter({
routes: []
});
这里的routes是一个数组，包含应用程序的路由。下面我们将演示如何配置一个简单的Vue路由示例。假设我们有一个Vue组件HelloWorld，我们想要将它作为我们应用程序的首页，那么我们需要将其配置为Vue路由的根路由：
import HelloWorld from '@/components/HelloWorld.vue';
const router = new VueRouter({
routes: [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld
}
]
});
现在，我们可以将路由器实例注入Vue实例中，启用Vue路由：
new Vue({
el: '#app',
router,
render: h => h(App)
});
在Vue应用程序中定义了其中一个路由后，我们需要将路由关联到指定的HTML元素上，假设我们的HTML元素的id为app，则可以使用以下方式将路由关联到Vue实例中：
<div id="app">
<router-view></router-view>
</div>
现在，我们的Vue路由已经在应用程序中运行起来了。
Vue路由的路径匹配
Vue路由使用类似于Unix shell的路径匹配规则。下面是一些Vue路由中的示例路径和相应的匹配规则：
const router = new VueRouter({
routes: [
{
path: '/user/:username',
component: User,
props: true
},
{
path: '/user-:userId',
component: User,
props: true
},
{
path: '/search/:query',
component: SearchResults
},
{
path: '/about',
component: About
},
{
path: '/contact',
component: Contact
}
]
})
/user/:username：匹配/user/后面的任何字符，如果想把匹配到的参数传递给组件，在路由配置中加入 props: true 即可。
/user-:userId：匹配/user-后面的任何字符，如果想把匹配到的参数传递给组件，在路由配置中加入 props: true 即可。
/search/:query：匹配/search/后面的任何字符
/about：匹配/about
/contact：匹配/contact
Vue路由的导航
在Vue路由中，导航分为两种类型：声明式导航和编程式导航。声明式导航通过Vue中的router-link组件实现，而编程式导航可以通过$router API实现。
- 声明式导航
在Vue应用程序中，使用router-link组件创建导航链接。router-link组件允许我们在不使用HTTP请求的情况下，通过HTML链接进行页面之间的切换，只需要设置to属性为目标URL即可。
<router-link to="/about">About</router-link>
<router-link :to="{ path: '/usr-' + $route.params.userId }">User</router-link>
- 编程式导航
在Vue路由中，我们可以使用$router API实现编程式导航。例如，我们可以定义导航方法：
methods: {
goToAbout() {
this.$router.push('/about');
},
goToUser(userId) {
this.$router.push('/user-' + userId);
}
}
通过调用$router.push()方法可以实现跳转到目标页面。
Vue路由的参数传递
在Vue路由中，我们可以通过props属性将参数传递给组件。在路由配置中加入props: true即可。例如：
const router = new VueRouter({
routes: [
{
path: '/user/:userId',
component: User,
props: true
}
]
});
上面的配置指定了 User 组件需要传递参数userId，我们接下来在组件内部可以直接通过 $route.params.userId 获取到传入的参数值。
<template>
<div>
User ID: {{ $route.params.userId }}
</div>
</template>
例如： http://yourdomain.com/user/123，就可以在User组件中使用this.$route.params.userId获取到参数123的值。
示例1：热门列表，点击进入详情页
热门列表使用了一个list组件，该组件通过axios发起网络请求获取到热门列表数据，并通过props方式传递给listItem组件。在listItem组件中，我们在template中使用router-link实现详情页的跳转，将 id 作为参数传递给详情页。
<!-- list.vue -->
<template>
<ul>
<li v-for="item of listItems" :key="item.id">
<list-item :item="item" />
</li>
</ul>
</template>
<script>
import axios from 'axios';
import ListItem from './ListItem.vue';
export default {
components: {
ListItem
},
data() {
return {
listItems: []
};
},
created() {
axios
.get('http://yourdomain.com/api/hot-list')
.then(response => {
this.listItems = response.data;
})
.catch(error => {
console.log(error);
});
}
};
</script>
<!-- ListItem.vue -->
<template>
<router-link :to="{ name: 'Detail', params: { id: item.id } }">
{{ item.name }}
</router-link>
</template>
<script>
export default {
props: {
item: {
type: Object,
required: true
}
}
};
</script>
在router/index.js文件中，定义了名为Detail的路由，将参数id传递给Detail组件，在Detail.vue中可以使用$route.params.id获取参数id的值。
import Vue from 'vue';
import VueRouter from 'vue-router';
import Detail from '../views/Detail.vue';
Vue.use(VueRouter);
const routes = [
{
path: '/',
name: 'Home',
},
{
path: '/detail/:id',
name: 'Detail',
component: Detail,
props: true
}
];
const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes
});
export default router;
在Detail.vue文件中使用$route.params.id获取参数值，然后将该值用于向服务器获取数据，最后在页面中展示。
示例2：私有页面路由认证
在这个示例中，我们将展示如何使用Vue路由实现私有页面路由认证。如果用户尝试访问受保护的页面（如个人资料或管理控制面板），并且未登陆，则需重定向到登录页面，等到用户成功登录后才能访问受保护的页面。
此示例中，我们将使用Vue路由器中的 beforeEach 导航守卫来检查是否登陆。每个页面加载之前都会调用一次导航守卫的 beforeEach 方法，如果未登陆，则重定向到登录页面。
在Main.vue文件中，我们定义了两个私有链接：个人资料和管理面板，这些链接只有在用户已经登陆之后才能够访问。
<!-- Main.vue -->
<template>
<div>
<div>
<router-link to="/">Home</router-link>
</div>
<div>
<router-link v-if="$store.state.isLoggedIn" to="/profile"
>Profile</router-link
>
</div>
<div>
<router-link v-if="$store.state.isLoggedIn" to="/admin"
>Admin</router-link
>
</div>
<div>
<button @click="$store.dispatch('logout')">Logout</button>
</div>
<router-view></router-view>
</div>
</template>
在router/index.js文件中，我们在导航守卫beforeEach方法中检查是否登陆，如果未登陆，则重定向到登录页面。
import Vue from 'vue';
import VueRouter from 'vue-router';
import Login from '../views/Login.vue';
import Main from '../views/Main.vue';
import Profile from '../views/Profile.vue';
import Admin from '../views/Admin.vue';
Vue.use(VueRouter);
const routes = [
{
path: '/login',
name: 'Login',
component: Login
},
{
path: '/',
name: 'Main',
component: Main
},
{
path: '/profile',
name: 'Profile',
component: Profile,
meta: {
requiresAuth: true
}
},
{
path: '/admin',
name: 'Admin',
component: Admin,
meta: {
requiresAuth: true,
requiresAdmin: true
}
}
];
const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes
});
router.beforeEach((to, from, next) => {
const isLoggedIn = store.state.isLoggedIn;
if (to.matched.some(record => record.meta.requiresAuth)) {
if (!isLoggedIn) {
next({ path: '/login', query: { redirect: to.fullPath } });
return;
}
}
if (to.matched.some(record => record.meta.requiresAdmin)) {
if (!isLoggedIn || !store.state.currentUser.isAdmin) {
next({ path: '/', query: { redirect: to.fullPath } });
return;
}
}
next();
});
export default router;
在前置导航守卫beforeEach方法中检查是否登陆以及用户是否是管理员，如果未登陆或不是管理员，则重定向到登录页面。
以上就是Vue路由的详细讲解，结合示例可以帮助大家更好的理解Vue路由的使用。
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：详解vue路由 - Python技术站
微信扫一扫 
支付宝扫一扫 