Vue 路由是一个单页应用程序的路由系统。配置步骤包括：安装 Vue 路由库。创建 VueRouter 实例并注入 Vue 实例。定义路由规则，包括路径、组件和可选名称。使用 <router-link> 创建路由链接，或在脚本中使用 $router 进行编程导航。
Vue 路由配置
什么是 Vue 路由？
Vue 路由是一个 Vue.js 官方提供的路由系统，它允许我们在单页应用程序中高效地管理和控制页面之间的导航。
如何配置 Vue 路由：
立即学习“前端免费学习笔记（深入）”；
安装 Vue 路由库：
<code class="bash">npm install vue-router</code>
创建 Vue Router 实例：
在 Vue.js 根实例中，创建一个 VueRouter 实例并将其注入到 Vue 实例中。
<code class="javascript">import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
const router = new VueRouter({
// 路由配置对象
})
new Vue({
router // 注入 Vue 实例
}).$mount('#app')</code>定义路由规则：
在路由配置对象中定义路由规则，每个规则包含以下属性：
<code class="javascript">const routes = [
{
path: '/home',
component: Home
},
{
path: '/about',
component: About
}
]</code>使用路由：
在模板中：
可以使用 <router-link> 组件在模板中创建路由链接。
<code class="html"><router-link to="/home">主页</router-link></code>
在脚本中：
也可以在脚本中使用 $router 对象进行编程导航。
<code class="javascript">this.$router.push('/about') // 推送新的历史记录条目
this.$router.replace('/about') // 替换当前历史记录条目</code>以上就是vue怎么配置路由的详细内容，更多请关注php中文网其它相关文章！
广告
收藏
收藏
收藏
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
336
