1). 创建项目
vue create myapp02
2). 添加一个配置文件
vue.config.js
module.exports={
lintOnSave:false,
devServer:{
port:8080
}
}
3). 启动项目
yarn serve
4). 删除 component下的所有*.vue
5). 删除 App.vue 下的内容
<template>
<div id="app">
</div>
</template>
6).在src目录下添加一个 views
的文件夹 视图区域
7).安装 vue-router 模块
yarn add vue-router@3.6
8).在src目录下,添加一个 router文件夹,添加一个index.js
代码如下
//1.导入路由模块
//ES6模块 ESM ---ecma script module
//ES6. imrpot xxx from 'xxx' --> export default xx
//nodejs require(xxx) --> module.exports
import VueRouter from "vue-router";
//2.导入vue模块
import Vue from "vue";
//nodes 导入模块
// const vue =require("vue-router")
//3.把路由类 挂载到vue上
Vue.use(VueRouter);
//5.导入视图组件 // @ --> src
import Home from "@/views/home.vue"
import Login from "@/views/login.vue"
//4.实例化路由
const router = new VueRouter({
//路由的模式
mode: "hash",
//配置路由的规则,规则是多条,带s,是一个数组
routes: [
{ // route
path: "/home",
component: Home
},
{
path: "/login",
component: Login
}
]
})
//暴露路由管理对象
// router > routes > route
// 管理 规则 单个路由(单个路由)
export default router;
9).在 main.js
导入 路由
// @ --> src
import router from "@/router"
new Vue({
router
})
10). 在App.vue
下,添加路由的出口(显示组件)
<router-view></router-view>
原文地址:http://www.cnblogs.com/zhouwying/p/16837254.html
1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,请务用于商业用途!
3. 如果你也有好源码或者教程,可以到用户中心发布,分享有积分奖励和额外收入!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!
7. 如遇到加密压缩包,默认解压密码为"gltf",如遇到无法解压的请联系管理员!
8. 因为资源和程序源码均为可复制品,所以不支持任何理由的退款兑现,请斟酌后支付下载
声明:如果标题没有注明"已测试"或者"测试可用"等字样的资源源码均未经过站长测试.特别注意没有标注的源码不保证任何可用性