<div id="app">
<router-link to="/home">home</router-link>
<router-link to="/list">list</router-link>
<router-link to="/user">user</router-link> <router-view></router-view>
</div>
<script>
let router = new VueRouter({
routes:[
{
path: '/home',
name: 'Home',
component: {
template:'<div>home</div>'
},
},
{
path: '/list',
name: 'List',
component: {
template: '<div>list</div>'
}
},
{
path: '/user',
name:'User',
component: {
template: '<div>user</div>'
}
}
]
});
let app = new Vue({
el:'#app',
router,
})
</script>

Vue的router使用的更多相关文章

  1. 三、vue之router

    三.vue之router 此时vue的脚手架.创建项目已经完成. ... vue的运行流程 index.html-->main.js-->App.vue-->router/index ...

  2. Vue中router两种传参方式

    Vue中router两种传参方式 1.Vue中router使用query传参 相关Html: <!DOCTYPE html> <html lang="en"> ...

  3. 四 Vue学习 router学习

    index.js: 按需加载组件: const login = r => require.ensure([], () => r(require('@/page/login')), 'log ...

  4. vue 中router.go;router.push和router.replace的区别

    vue 中router.go:router.push和router.replace的区别:https://blog.csdn.net/div_ma/article/details/79467165 t ...

  5. 【vue】 router.beforeEach

    import store from '@/store' const Vue = require('vue') const Router = require('vue-router') Vue.use( ...

  6. vue & this.$router.resolve

    vue & this.$router.resolve gotoAutoUpdate (query = {}) { const { href } = this.$router.resolve({ ...

  7. Vue中router路由的使用、router-link的使用(在项目中的实际运用方式)

    文章目录 1.先看router中的index.js文件 2.router-link的使用 3.实现的效果 前提:router已经安装 1.先看router中的index.js文件 import Vue ...

  8. vue中$router.push打开新窗口

    在vue中使用 this.$router.push({ path:  '/home' }) 默认是替代本窗口 如果想新开一个窗口,可以使用下面的方式: let routeData = this.$ro ...

  9. vue之router钩子函数

    模块一:全局导航钩子函数 1.vue router.beforeEach(全局前置守卫) beforeEach的钩子函数,它是一个全局的before 钩子函数, (before each)意思是在 每 ...

  10. vue 的router的简易运用

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. RestTemplate 服务名请求

    @loadBalance注解修饰的restTemplate才能实现服务名的调用,没有修饰的restTemplate是没有该功能的. @loadBalance是Netflix的ribbon中的一个负载均 ...

  2. 转://Oracle 11gR2 RAC ASM磁盘全部丢失后的恢复

    一.环境描述 (1)Oracle 11.2.0.3 RAC ON Oracle Linux 6 x86_64,只有一个ASM外部冗余磁盘组--DATA: (2)OCR,VOTEDISK,DATAFIL ...

  3. ORB-SLAM2(1) Linux下配置和编译

    ORB-SLAM2 官网:https://github.com/raulmur/ORB_SLAM2 配置教程:http://blog.csdn.net/zzlyw/article/details/54 ...

  4. 转载 【.NET基础】--委托、事件、线程(1) https://www.cnblogs.com/chengzish/p/4559268.html

    [.NET基础]--委托.事件.线程(1)   1,委托 是存放方法的指针的清单,也就是装方法的容器 A, 新建winform项目[01委托],项目中添加dg_SayHi.cs 委托类 用于存储方法 ...

  5. Swift开发iOS项目实战视频教程(二)---图片与动画

    本课主要介绍UIImageview.NSTimer的使用.并介绍了一种动画实现方式. 本教程摒弃枯燥的语法和知识解说.全是有趣有料的项目实战! 视频优酷链接:v.youku.com/v_show/id ...

  6. 计算几何总结(Part 1~2)

    Preface 对于一个初三连三角函数都不会的蒟蒻来说计算几何简直就是噩梦. 反正都是要学的也TM没办法,那就慢慢一点点学起吧. 计算几何要有正确的板子,不然那种几百行CODE的题写死你. 本蒟蒻的学 ...

  7. 【JVM.1】java内存区域与内存溢出

    鲁迅曾说过:Java与C++之间有一堵由内存动态分配和垃圾收集技术所围成的“高墙”,墙外面的人想进来,墙里面的人想出去. 一.虚拟机内存分布 Java虚拟机在执行Java程序的过程中会把它所管理的内存 ...

  8. Docker 快速验证 HTML 导出 PDF 高效方案

    需求分析 项目中用到了 Echarts,想要把图文混排,当然包括 echarts 生成的 Canvas 图也导出 PDF. 设计和实现时,分析了 POI.iText.freemaker.world 的 ...

  9. 牛客训练赛25-A-因数个数

    题目链接https://www.nowcoder.com/acm/contest/158/A 无语...这题很迷啊,原谅我的菜,刚开始想用预处理欧拉筛和前缀和,可是这题太血崩了,这样一样要遍历,1-e ...

  10. Linux内核读书笔记第四周

    进程管理 1.进程描述符及任务结构 进程存放在叫做任务队列(task list)的双向循环链表中.链表中的每一项包含一个具体进程的所有信息,类型为task_struct,称为进程描述符(process ...