<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. blinker语音控制Arduino/esp8266开关灯-滑动条使用-文本框交互

    总链接:  https://www.arduino.cn/thread-78393-1-1.html 语音控制:https://doc.blinker.app/?file=005-App%E4%BD% ...

  2. Oracle 11g中的snapshot standby特性

    在Oracle 11g中,data guard最吸引人的,除了active data guard的实时查询特性(即可以以只读方式打开物理standby数据库的同时MRP进程能继续做recover),快 ...

  3. Qt5.9一个简单的多线程实例(类QThread)(第一种方法)

    Qt开启多线程,主要用到类QThread.有两种方法,第一种用一个类继承QThread,然后重新改写虚函数run().当要开启新线程时,只需要实例该类,然后调用函数start(),就可以开启一条多线程 ...

  4. PAT A1033 To Fill or Not to Fill (25 分)——贪心

    With highways available, driving a car from Hangzhou to any other city is easy. But since the tank c ...

  5. mysql编码问题:

    在my.ini文件改为: [client]default-character-set = utf8port=3306 [mysql] default-character-set=utf8 [mysql ...

  6. C# 语法一 构造函数

    1.构造函数的执行顺序 2.静态变量和成员变量的区别 代码示例: using System; using System.Collections.Generic; using System.Linq; ...

  7. 【Codeforces 204E】Little Elephant and Strings

    Codeforces 204 E 题意:给\(n\)个串,求对于每一个串在至少\(k\)个串中出现的它的子串\(S_{l..r}\)有多少个. 思路:后缀自动机上\(dp\)... 我们首先构造出这\ ...

  8. Luogu P3372 【模板】线段树 1

    qwq #include<cstdio> using namespace std; ; int n,m,x,y,flag; *maxn],r[*maxn]; *maxn],sum[*max ...

  9. 动手动脑(lesson 3)

    一· 答:本质上一样,但在内存分配时有区别.如下图: 二· 程序运行结果截图: 答案截图: 三· 四· 答:构造函数与参数个数不匹配. 五· 运行结果截图: 总结:所有类的变量都默认初始化为null, ...

  10. 现有各种SSTC电路图,欢迎补充,研究,开发

    现有各种SSTC电路图,欢迎补充,研究,开发  496464505 2016-3-1 16:01:55 现在的各种SSTC基本都是这些图   2016-3-3 19:28:23 comter2001 ...