<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. centos7下安装docker(13.1docker存储--data volume)

    我们现在知道docker 有两种存储方式:storage driver和data volume stroage driver这种存储方式主要是存储那些无状态的数据,是镜像层和容器层组成的,而data ...

  2. centos7升级内核版本

    本文转载http://blog.csdn.net/nciasd/article/details/51490146,大神非常厉害!!!!! 查看当前系统的内核版本 # uname -r 1.导入key ...

  3. 从Excel表导入数据到Table

    步骤: 1.写第一行SQL,(本sql对应的是oracle数据库) ="INSERT INTO TD_PROMOTION_RATE VALUES("&A3&&quo ...

  4. IDEA学生免费申请教程

    1.点击网址,进入申请页面https://www.jetbrains.com/zh/student/ 2.由于网页是全英文的,可以用浏览器将页面翻译成中文版,更方便操作 3.因为没有大学的邮箱地址,所 ...

  5. Java多线程编程模式实战指南(三):Two-phase Termination模式

    停止线程是一个目标简单而实现却不那么简单的任务.首先,Java没有提供直接的API用于停止线程.此外,停止线程时还有一些额外的细节需要考虑,如待停止的线程处于阻塞(等待锁)或者等待状态(等待其它线程) ...

  6. [05] EL表达式

    1.概述 EL = Expression Language 表达式语言,用来在JSP中替代<%=%>的数据表达方式,EL更简洁,它的语法如下: ${...} 1   1 ${...}   ...

  7. [04] Bean的实例化和多个配置文件

    之前我们已经提到过,Spring的核心能力之一就是IOC机制,从上章的示例中我们也可以看到,Spring中的ApplicationContext充当了一个实例化对象的容器的角色,并管理着它们的生命周期 ...

  8. Data Partitioning Guidance

    在很多大规模的解决方案中,数据都是分成单独的分区,可以分别进行管理和访问的.而分割数据的策略必须仔细的斟酌才能够最大限度的提高效益,同时最大限度的减少不利影响.数据的分区可以极大的提升可扩展性,降低争 ...

  9. [Spark][Python]DataFrame where 操作例子

    [Spark][Python]DataFrame中取出有限个记录的例子 的 继续 [15]: myDF=peopleDF.where("age>21") In [16]: m ...

  10. RHEL7VIM编辑器

    本文介绍Vim编辑器的使用 vi和vim的区别 它们都是多模式编辑器 不同的是vim是vi的升级版本 它不仅兼容vi的所有指令而且还有一些新的特性在里面 vim的这些优势主要体现在以下几个方面 多级撤 ...