<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. eureka分区的深入讲解

    背景 用户量比较大或者用户地理位置分布范围很广的项目,一般都会有多个机房.这个时候如果上线springCloud服务的话,我们希望一个机房内的服务优先调用同一个机房内的服务,当同一个机房的服务不可用的 ...

  2. Tensorflow基本概念

    [本文摘自网络,仅供学习使用] 官网上对TensorFlow的介绍是,一个使用数据流图(data flow graphs)技术来进行数值计算的开源软件库.数据流图中的节点,代表数值运算:节点节点之间的 ...

  3. oracle 查询分区表的最大分区以及分区字段的最大值

    select 'select max(' || column_name || ') from ' || owner || '.' || name || ';'  from DBA_PART_KEY_C ...

  4. VsCode之使用WebView通信

    之前我在这篇文章VsCode插件开发之插件初步通信 通过插件完成通信,这回我还是通过插件,只不过方式主要以在ts文件里面使用webview来进行通信. 另外在此声明,一定要好好看仔细看官方文档,国内关 ...

  5. 1226 快速幂 取余运算 洛谷luogu

    还记得 前段时间学习二进制快速幂有多崩溃 当然这次方法略有不同 居然轻轻松松的 题目描述 输入b,p,k的值,求b^p mod k的值.其中b,p,k*k为长整型数. 输入输出格式 输入格式: 三个整 ...

  6. 项目Alpha冲刺 3

    作业描述 课程: 软件工程1916|W(福州大学) 作业要求: 项目Alpha冲刺(团队) 团队名称: 火鸡堂 作业目标: 介绍第三天冲刺的项目进展.问题困难和心得体会 1.团队信息 队名:火鸡堂 队 ...

  7. 理解Express中间件

    阅读目录 一:body-parser中间件 二:cookie-parser中间件 三:express-session 中间件 四:理解使用morgan记录操作日志 回到顶部 一:body-parser ...

  8. python 数据结构 队列(queue)

    如需转发,请注明出处:小婷儿的python https://www.cnblogs.com/xxtalhr/p/10293817.html 欢迎关注小婷儿的博客: 有问题请在博客下留言或加作者微信:t ...

  9. kubernetes session回话保持

    1.Nginx 版本 root@ingress-nginx-controller-4b75b:/# /usr/sbin/nginx -vnginx version: nginx/1.13.9 2.in ...

  10. C# 双击ListView出现编辑框可编辑,回车确认

    原文:C# 双击ListView出现编辑框可编辑,回车确认 //获取鼠标点击的项------API [DllImport("user32")] public static exte ...