vue.js router的配置
来源:互联网 发布:淘宝卖家为什么被处罚 编辑:程序博客网 时间:2024/05/29 08:04
前言:使用的编辑器是atom
背景:希望阅读者具备下载安装vue.js的知识
装好脚手架的界面
点开src,结构如下,B.vue C.vue D.vue是我自己写的,后面细讲,主要看APP.vue 和main.js
router就是在APP.vue和main.js配置
代码如下:
main.js:
import Vue from 'vue'
import Router from 'vue-router'
import App from './App.vue'
import Bar from './B.vue'
import C from './C.vue'
import D from './D.vue'
Vue.use(Router)
const User = {
template: `<div>User {{ $route.params.id }}</div>`
}
const routers = new Router({
routes : [{
path : '/boy',
component:Bar
},
{
path : '/charlie',
component : C
},
{
path : '/doc',
component : D
},
{ path: '/user/:id',
component: User }
]
});
new Vue({
el:'#app',
render:h=>h(App),
router:routers
})
蓝色部分为不可更改部分,红色为可以更改的,如果你新写了一个C.vue.首先import,再写{
path : '/charlie',
component : C
},就ok了
我这里是把user写在了内部,可以写在外面作为一个单独的user.vue再引用;
用user来解释动态写router,动态是啥意思呢?比如user有id,username,你需要让他们都在user界面显示,但是后缀又不同
就是user/id user/username
橙色为user,能替换的就是id,其余不变;
- vue.js router的配置
- 关于vue-router.js 下载的问题
- Vue-Router的路由实例构造配置
- vue-router使用history的配置问题
- webpack+Vue.js+vue-router的一个简单实例应用
- Vue.js路由组件vue-router的使用方法
- [Vue.js启航]——Vue-Router的使用
- Vue.js项目API、Router配置拆分实践
- vue-router.js,入门案例
- vue.js——router
- vue-router 的属性
- vue-router的使用
- vue-router的使用
- Vue-router的使用
- vue.js 关于router-link的相关样式问题
- Vue.js笔记-vue-router入门
- vue2.0,vue-router配置
- Vue2.0配置vue-router
- 利用Dozer实现vo-Entiy-Model中属性的复用
- Oracle:查找表的主键,外键,唯一性约束,索引
- Unity--资源管理
- 2017 Multi-University Training Contest
- CSU
- vue.js router的配置
- 老司机找bug的十年心路历程
- 包含类的c++程序
- 解决安装配置hive时出错Caused by: com.mysql.cj.core.exceptions.CJCommunicationsException: Communications link
- hadoop学习笔记--9.hive初识
- 1. ArrayList和LinkedList总结
- hdu3037 组合数 lucas定理
- Linux 中断学习之小试牛刀篇---Linux中断内核编程
- 博弈论 SG函数模板