vue-router新建路由

1. 在src目录下新建一个router文件夹，用于存放路由相关的代码。

2. 在router文件夹下新建一个index.js文件，作为路由的入口文件。

3. 在index.js文件中引入Vue和Vue-Router，并使用Vue.use()方法注册Vue-Router插件。

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

4. 定义路由组件。

在Vue中，路由组件可以是一个单文件组件，也可以是一个普通的JavaScript对象。

const Home = {
  template: '<div>Home</div>'
}

const About = {
  template: '<div>About</div>'
}

5. 定义路由数组。

路由数组中定义了每个路由的路径、组件等信息。

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

6. 创建VueRouter实例。

const router = new VueRouter({
  routes // 等同于 routes: routes
})

7. 将router实例注入到Vue实例中。

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

8. 在模板中使用路由。

可以使用<router-link>组件来生成链接，使用<router-view>组件来显示匹配的组件。

<template>
  <div id="app">
    <router-link to="/">Home</router-link>
    <router-link to="/about">About</router-link>
    <router-view></router-view>
  </div>
</template>

以上就是新建Vue-Router路由的基本步骤。