<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. 莫比乌斯函数 51nod-1240(合数分解试除法)

    就是输出n时,莫比乌斯函数的值.直接将n唯一分解即可. 思路:筛出105以内的素数,因为109开方,105就差不多.当一个大数还没有被1000个素数分解,那么这个数基本上可以认为是素数(为合数为小概率 ...

  2. api接口简短实力

    无参数传递 public function actionJiekou(){ $url = 'http://wap.guoshihui.com/_static/wap/video/startVideo. ...

  3. day20 Python 高阶函数,函数,嵌套,闭包 装饰器

    高阶函数定义 1.函数接收的参数是一个函数名 2.函数的返回值是一个函数名 3.满足上述条件任意一个都可以称之为高阶函数 一.函数的接收参数是一个函数名 import time def foo(): ...

  4. luogu-1563玩具谜题

    题目描述 小南有一套可爱的玩具小人, 它们各有不同的职业. 有一天, 这些玩具小人把小南的眼镜藏了起来. 小南发现玩具小人们围成了一个圈,它们有的面朝圈内,有的面朝圈外.如下图: 这时singersi ...

  5. ros新建的包找不到

    cannot find the package 这个问题的解决办法一:每次打开命令窗都使用一次 source ~/ros_ws/devel/setup.bash 解决方法二:在住文件夹的图形界面使用快 ...

  6. Python基础(2)——列表、字典、数据运算

    1.列表 #创建列表 name_list = ['alex', 'seven', 'eric'] #或 name_list = list(['alex', 'seven', 'eric']) #访问列 ...

  7. C++的 new 和 detele

    什么都不说 直接上代码  哈哈 #include <iostream> using namespace std; int main(int argc, char *argv[]) { co ...

  8. Android学习之基础知识四-Activity活动1讲

    一.活动(Activity)的基本用法: 1.手动创建活动FirstActivity(java源码): A.Android Studio在一个工作区间只允许打开一个项目,点击:File--->C ...

  9. GIT 管理修改、删除文件

    管理修改 现在,假定你已经完全掌握了暂存区的概念.下面,我们要讨论的就是,为什么Git比其他版本控制系统设计得优秀,因为Git跟踪并管理的是修改,而非文件. 你会问,什么是修改?比如你新增了一行,这就 ...

  10. bat无故报错打印混乱的解决

    1. 下面语句加了一个无意义的ping操作.不加的时候经常报错,报操作数不是数字,实际上打印发现NOW值和格式并没有错误.怀疑是下面操作数太多了,而执行速度又太快,导致执行时总是很容易出错.通过增加一 ...