使用 HbuilderX 快速搭建一个 组件路由项目

vue router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建
单页面应用变得易如反掌。

安装

vue-router 是一个插件包，所以我们还是需要用 npm 来进行安装的。

安装前先 在命令行中 ctrl+c 停止服务-y

打开命令行工具，进入你的项目目录，输入下面命令。
npm i vue-router@3.5.3

一般情况出现运行时间证明  搭建成功

搭建步骤:

1.先删除components组件目录

2.整理App.vue---以便理解

3.创建首页，登录，注册组件

Index.vue

Login.vue

Reg.vue

4. 创建 router 目录
创建 index.js 文件,在其中配置路由
import Vue from 'vue';
import router from 'vue-router'; /* 导入路由 */
import login from '../views/login'; /* 导入其他组件 */
import content from '../components/content'; /* 导入其他组件 */
Vue.use(router)
/* 定义组件路由 */
var rout = new router({
routes: [
{
path: '/index',
name: 'index',
component: index
},
{
path: '/content',
component: content
}
]
});
//导出路由对象
export default rout;

5.在 main.js 中配置路由
import router from './router/index.js'
Vue.use(router);
new Vue({
el: '#app',
router,
render: h => h(App)
})

6.使用路由
<router-link to="/index">首页</router-link>
<router-link to="/content">内容</router-link>
<router-view/>

7.终端启动项目

npm run serve