vue路由怎么创建

百变鹏仔 3周前 (09-25) #VUE

文章标签路由

创建 vue 路由需以下步骤：安装 vue 路由导入 vue 路由创建路由创建路由实例注入路由实例使用路由

如何创建 Vue 路由

Vue 路由是一个用于管理单页应用程序中页面导航的库。它可以通过以下步骤创建：

1. 安装 Vue Router

npm install vue-router

2. 导入 Vue Router

立即学习“前端免费学习笔记（深入）”；

在你的主 Vue 文件中，导入 Vue Router：

import Vue from 'vue'import VueRouter from 'vue-router'Vue.use(VueRouter)

3. 创建路由

创建一组路由对象，每个对象都表示一个页面：

const routes = [  {    path: '/',    component: Home  },  {    path: '/about',    component: About  }]

其中：

4. 创建路由实例

使用 VueRouter 构造函数创建路由实例：

const router = new VueRouter({  routes})

5. 注入路由实例

将路由实例注入 Vue 根实例：

new Vue({  router}).$mount('#app')

6. 使用路由

现在，你可以使用组件在页面之间导航：

<router-link to="/">Home</router-link><router-link to="/about">About</router-link>

或者使用 router.push() 和 router.replace() 方法以编程方式导航：

router.push('/')router.replace('/about')

注意：

文章推荐