Vue Router 和 Vue Route 是 Vue.js 中用于构建单页面应用(SPA)路由系统的两个核心概念。Vue Router 是 Vue.js 的官方路由管理器,而 Vue Route 则是在 Vue 组件内部通过 $route
对象来访问当前路由的信息。
Vue Router 的使用
Vue Router 主要用于定义路由规则、创建导航链接以及渲染与 URL 对应的组件。以下是一个简单的使用示例:
1. 安装和引入 Vue Router
首先,你需要在项目中安装 Vue Router:
npm install vue-router
然后,在你的 Vue 应用中引入并使用 Vue Router:
import Vue from 'vue';
import Router from 'vue-router';
import Home from './views/Home.vue';
import About from './views/About.vue';
Vue.use(Router);
export default new Router({
routes: [
{
path: '/',
name: 'home',
component: Home
},
{
path: '/about',
name: 'about',
component: About
}
]
});
2. 在 Vue 应用中使用路由
在你的 Vue 应用入口文件(如 main.js
)中,引入并使用这个路由实例:
import Vue from 'vue';
import App from './App.vue';
import router from './router';
new Vue({
router,
render: h => h(App)
}).$mount('#app');
3. 在组件中创建导航链接和渲染路由内容
在 App.vue
或其他组件中,使用 <router-link>
创建导航链接,并使用 <router-view>
来渲染当前路由对应的组件:
<template>
<div id="app">
<nav>
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link>
</nav>
<router-view></router-view>
</div>
</template>
Vue Route 的使用
Vue Route 主要通过 $route
对象在 Vue 组件内部访问当前路由的信息。以下是一些常用的 $route
属性:
$route.path
:字符串,对应当前路由的路径,总是解析为绝对路径,如 "/foo/bar"。$route.params
:一个包含动态片段和星号片段的键值对的对象。$route.query
:一个包含查询参数的对象。例如,对于路径 "/foo?user=1",则有$route.query.user == 1
。$route.name
:当前路由的名字(如果有的话)。
示例:在组件中访问路由信息
假设你有一个组件,你想根据当前路由的参数或查询参数来改变其内容。你可以这样使用 $route
:
<template>
<div>
<h1>User Info</h1>
<p>User ID: {{ $route.params.id }}</p>
<p>Query Parameter: {{ $route.query.param }}</p>
</div>
</template>
<script>
export default {
name: 'UserInfo',
watch: {
'$route.params': function(toParams, fromParams) {
// 对路由变化作出响应...
}
}
}
</script>
在这个示例中,我们创建了一个名为 UserInfo
的组件,它显示当前路由的 id
参数和查询参数 param
。我们还使用了 Vue 的 watch
选项来监听 $route.params
的变化,以便在路由参数变化时执行某些操作。
综合示例
将 Vue Router 和 Vue Route 结合使用,你可以构建复杂的单页面应用。以下是一个更综合的示例:
定义路由时包含一个带有参数的路由:
export default new Router({
routes: [
// ...其他路由
{
path: '/user/:id',
name: 'user',
component: User
}
]
});
在 User
组件中,根据 $route.params.id
显示不同用户的信息:
<template>
<div>
<h1>User {{ $route.params.id }}</h1>
<!-- 根据 $route.params.id 加载和显示用户数据 -->
</div>
</template>
<script>
export default {
name