1. 安装和基本配置
代码示例
// main.js
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
const app = createApp(App)
app.use(router)
app.mount('#app')// router/index.js
import { createRouter, createWebHashHistory } from 'vue-router'
import Home from '../views/Home.vue'
const routes = [
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/about',
name: 'About',
component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
}
]
const router = createRouter({
history: createWebHashHistory(),
routes
})
export default router
<!-- App.vue -->
<template>
<div>
<h1>App Component</h1>
<router-link to="/">Home</router-link>
<router-link to="/about">About</router-link>
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'App'
}
</script><!-- Home.vue -->
<template>
<div>
<h2>Home Component</h2>
<p>{{ message }}</p>
</div>
</template>
<script>
export default {
name: 'Home',
data() {
return {
message: 'Welcome to the home page!'
}
}
}
</script><!-- About.vue -->
<template>
<div>
<h2>About Component</h2>
<p>{{ message }}</p>
</div>
</template>
<script>
export default {
name: 'About',
data() {
return {
message: 'This is the about page!'
}
}
}
</script>讲解
安装 Vue Router 4 之后，我们需要在 main.js 中创建 Vue 应用实例，并将创建的路由实例作为插件使用：
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
const app = createApp(App)
app.use(router)
app.mount('#app')
在 router/index.js 文件中，我们可以定义路由的配置信息：
import { createRouter, createWebHashHistory } from 'vue-router'
import Home from '../views/Home.vue'
const routes = [
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/about',
name: 'About',
component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
}
]
const router = createRouter({
history: createWebHashHistory(),
routes
})
export default router
其中，createRouter() 方法用于创建路由实例，接受一个配置对象，其中 history 属性用于指定路由模式，可以是 createWebHistory（history 模式）或 createWebHashHistory（hash 模式），routes 属性用于定义路由映射关系。
在路由配置中，我们可以定义一个 path 属性，它用于指定当前路由的路径，一个 name 属性，它用于给当前路由起一个名称，一个 component 属性，它用于指定当前路由对应的组件。如果需要异步加载组件，可以使用 component: () => import('...') 的方式。
2. 路由导航和路由传参
代码示例
<!-- Home.vue -->
<template>
<div>
<h2>Home Component</h2>
<p>{{ message }}</p>
<button @click="goToAbout">Go to About page</button>
</div>
</template>
<script>
export default {
name: 'Home',
data() {
return {
message: 'Welcome to the home page!'
}
},
methods: {
goToAbout() {
this.$router.push({ name: 'About', params: { id: 1 } })
}
}
}
</script>
<!-- About.vue -->
<template>
<div>
<h2>About Component</h2>
<p>{{ message }}</p>
<p>ID: {{ $route.params.id }}</p>
</div>
</template>
<script>
export default {
name: 'About',
data() {
return {
message: 'This is the about page!'
}
}
}
</script>
<!-- App.vue -->
<template>
<div>
<h1>App Component</h1>
<router-link to="/">Home</router-link>
<router-link to="/about/2">About</router-link>
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
// router/index.js
import { createRouter, createWebHashHistory } from 'vue-router'
import Home from '../views/Home.vue'
const routes = [
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/about/:id',
name: 'About',
component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
}
]
const router = createRouter({
history: createWebHashHistory(),
routes
})
export default router
讲解
在 Vue Router 4 中，我们可以通过 $router 对象来进行路由导航，常用的方法有 push() 和 replace()。push() 方法用于向浏览器的历史记录中添加一条新记录，从而导航到新的路由，而 replace() 方法则是用新路由替换当前路由记录，不会添加新的记录。
例如，在 Home.vue 组件中，我们可以定义一个 goToAbout() 方法，用于跳转到 About 页面：
export default {
name: 'Home',
data() {
return {
message: 'Welcome to the home page!'
}
},
methods: {
goToAbout() {
this.$router.push({ name: 'About', params: { id: 1 } })
}
}
}这里的 this.$router.push() 方法接受一个对象参数，其中 name 属性用于指定要跳转到的路由名称，params 属性用于传递路由参数。
在 About.vue 组件中，我们可以通过 $route.params 对象来获取路由参数：
<template>
<div>
<h2>About Component</h2>
<p>{{ message }}</p>
<p>ID: {{ $route.params.id }}</p>
</div>
</template>这里的 $route.params.id 表示当前路由的 id 参数。
除了使用对象形式的路由导航，我们还可以使用字符串形式的路径来进行导航，例如：
this.$router.push('/about/1')这样会跳转到 /about/1 路径，并且会触发路由的相应钩子函数。
总之，路由导航是 Vue Router 4 中非常重要的功能，它可以让我们轻松地实现页面之间的跳转和参数传递，让应用具备更好的用户体验。