vue路由·配置

第一种方法·

在Vue中使用路由一般需要引入Vue Router库，可以通过Vue CLI脚手架来快速生成webpack打包的Vue项目。

在Vue项目中使用路由，通常需要先定义路由规则，再在组件中引入路由来进行跳转等操作。以下是一个简单的Vue Router的用法示例：

首先，你需要在项目中通过npm安装Vue Router：

npm install vue-router

然后在main.js中引入Vue Router并创建一个VueRouter实例，代码类似这样：

import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './App.vue'
import Home from './views/Home.vue'
import About from './views/About.vue'

Vue.use(VueRouter)

const router = new VueRouter({
  routes: [
    { path: '/', component: Home },
    { path: '/about', component: About }
  ]
})

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

在上述代码中，我们首先通过import引入了Vue、Vue Router和两个组件App.vue、Home.vue、About.vue。然后通过Vue.use()语句来安装Vue Router插件，接着我们用VueRouter实例来定义路由规则（路由的配置项），有两个路由/和/about，它们分别对应了两个组件：Home和About，最后通过new Vue()语句创建了Vue实例，并将VueRouter实例挂载在Vue实例上的router属性上。

接下来，我们就需要在App.vue组件中使用路由，代码类似这样：

<template>
  <div>
    <h1>My App</h1>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'app'
}
</script>

在上述代码中，我们通过<router-view>标签来渲染当前路由对应的组件。此外，你还可以通过<router-link>标签来添加路由链接，如：

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

这样当我们点击这些链接时，Vue Router就会自动帮我们切换到对应的页面组件中。

注意，在入口文件配置路由会使main.js中引入太多的文件，导致阅读性下降

第二种：

在src目录中建一个router文件夹，并在其中定义路由规则，那么可以按照以下步骤挂载使用：

1. 在router/index.js中定义路由规则，例如：

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
import About from '../views/About.vue'

Vue.use(VueRouter)

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

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

在该示例中，我们通过import引入了Vue、Vue Router和两个组件Home.vue和About.vue。然后定义了两个路由/和/about，它们分别对应了两个组件。最后创建了VueRouter实例，并将路由规则导出，方便在其它文件中使用。

2. 在main.js中引入router/index.js。可以这样写：

import Vue from 'vue'
import App from './App.vue'
import router from './router'

new Vue({
  router,
  render: h => h(App),
}).$mount('#app')

在引入的代码中，我们先引入了Vue、App.vue和router/index.js，然后通过new Vue()语句创建Vue实例，并将Vue Router实例路由挂载在Vue实例上的router属性上。

这样，在你启动Web服务器后，Vue Router就会自动应用该实例，从而使应用程序可以使用Vue Router路由了。

第一种方法·

第二种：

猜你喜欢