6.1 使用Vue Router实现路由功能
Vue Router是Vue.js官方提供的路由管理器,可以帮助我们实现单页应用中的路由功能。通过Vue Router,我们可以定义不同的路由,并在应用中进行导航。
以下是一个示例代码,演示了如何使用Vue Router实现路由功能:
<!DOCTYPE html>
<html>
<head>
<title>使用Vue Router实现路由功能</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router@3.5.3/dist/vue-router.js"></script>
</head>
<body>
<div id="app">
<router-link to="/home">Home</router-link>
<router-link to="/about">About</router-link>
<router-view></router-view>
</div>
<script>
// 创建组件
const Home = { template: '<div>Home</div>' };
const About = { template: '<div>About</div>' };
// 创建Vue Router实例
const router = new VueRouter({
routes: [
{ path: '/home', component: Home },
{ path: '/about', component: About }
]
});
// 创建Vue实例
new Vue({
el: '#app',
router
});
</script>
</body>
</html>
在上述示例中,我们首先创建了两个组件Home
和About
,分别用于展示不同的页面内容。
然后,我们创建了一个Vue Router实例,并在其选项中定义了两个路由。每个路由都有一个path
表示路径,和一个component
表示对应的组件。
在Vue实例中,我们将Vue Router实例通过router
选项进行配置,并在模板中使用<router-link>
组件来定义导航链接,使用<router-view>
组件来展示当前路由对应的组件。
当你在浏览器中运行上述代码时,你可以看到页面上有两个导航链接Home
和About
,点击不同的链接时,对应的组件内容会在页面中展示出来。
6.2 定义和导航到不同的路由
在Vue Router中,我们可以通过定义不同的路由来实现不同页面之间的导航。
以下是一个示例代码,演示了如何定义和导航到不同的路由:
<!DOCTYPE html>
<html>
<head>
<title>定义和导航到不同的路由</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router@3.5.3/dist/vue-router.js"></script>
</head>
<body>
<div id="app">
<router-link to="/">Home</router-link>
<router-link to="/about">About</router-link>
<router-view></router-view>
</div>
<script>
// 创建组件
const Home = { template: '<div>Home</div>' };
const About = { template: '<div>About</div>' };
// 创建Vue Router实例
const router = new VueRouter({
routes: [
{ path: '/', component: Home },
{ path: '/about', component: About }
]
});
// 创建Vue实例
new Vue({
el: '#app',
router
});
</script>
</body>
</html>
在上述示例中,我们定义了两个路由:'/'
表示根路径对应的组件是Home
,'/about'
表示/about
路径对应的组件是About
。
通过<router-link>
组件,我们可以在页面中创建导航链接。例如,点击Home
链接将会导航到根路径,对应的Home
组件内容会显示出来。
6.3 学习路由传参和路由守卫
在实际开发中,我们经常需要在路由之间传递参数,以满足不同页面的需求。Vue Router提供了多种方式来实现路由传参。
以下是一个示例代码,演示了如何在路由之间传递参数和使用路由守卫:
<!DOCTYPE html>
<html>
<head>
<title>路由传参和路由守卫</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router@3.5.3/dist/vue-router.js"></script>
</head>
<body>
<div id="app">
<router-link :to="{ path: '/user', query: { id: 1 }}">User</router-link>
<router-view></router-view>
</div>
<script>
// 创建组件
const User = {
template: `
<div>
<h2>User</h2>
<router-link :to="{ path: '/profile', params: { id: userId }}">Profile</router-link>
</div>
`,
data() {
return {
userId: 1
};
}
};
const Profile = {
template: `
<div>
<h2>Profile</h2>
<p>用户ID: {{ $route.params.id }}</p>
</div>
`
};
// 创建Vue Router实例
const router = new VueRouter({
routes: [
{ path: '/user', component: User },
{ path: '/profile', component: Profile }
]
});
// 创建Vue实例
new Vue({
el: '#app',
router
});
</script>
</body>
</html>
在上述示例中,我们定义了两个组件:User
和Profile
。
在User
组件中,我们使用<router-link>
组件来创建导航链接,并通过to
属性传递了一个包含参数的对象。这里使用了query
属性来传递参数,参数名为id
,值为1
。
在Profile
组件中,我们通过$route.params
来访问路由参数,这里的参数名为id
。
当你在浏览器中运行上述代码时,你可以点击User
链接,然后导航到Profile
页面,同时URL中的参数会被传递给Profile
组件,并在页面中显示出来。
此外,Vue Router还提供了路由守卫的功能,可以在路由切换前后执行一些操作,比如进行权限验证或日志记录等。有关路由守卫的详细讲解,请参考Vue Router的官方文档。