创建 Vue 路由需以下步骤：安装 Vue 路由导入 Vue 路由创建路由创建路由实例注入路由实例使用路由
如何创建 Vue 路由
Vue 路由是一个用于管理单页应用程序中页面导航的库。它可以通过以下步骤创建：
1. 安装 Vue Router
<code>npm install vue-router</code>
2. 导入 Vue Router
立即学习“前端免费学习笔记（深入）”；
在你的主 Vue 文件中，导入 Vue Router：
<code class="js">import Vue from 'vue' import VueRouter from 'vue-router' Vue.use(VueRouter)</code>
3. 创建路由
创建一组路由对象，每个对象都表示一个页面：
<code class="js">const routes = [
{
path: '/',
component: Home
},
{
path: '/about',
component: About
}
]</code>其中：
path：页面的路径。component：与该路径关联的 Vue 组件。4. 创建路由实例
使用 VueRouter 构造函数创建路由实例：
<code class="js">const router = new VueRouter({
routes
})</code>5. 注入路由实例
将路由实例注入 Vue 根实例：
<code class="js">new Vue({
router
}).$mount('#app')</code>6. 使用路由
现在，你可以使用 <router-link> 组件在页面之间导航：
<code class="html"><router-link to="/">Home</router-link> <router-link to="/about">About</router-link></code>
或者使用 router.push() 和 router.replace() 方法以编程方式导航：
<code class="js">router.push('/')
router.replace('/about')</code>注意：
以上就是vue路由怎么创建的详细内容，更多请关注php中文网其它相关文章！
广告
收藏
收藏
收藏
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
336
