<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. 2017-2018-2 20155314《网络对抗技术》Exp5 MSF基础应用

    2017-2018-2 20155314<网络对抗技术>Exp5 MSF基础应用 目录 实验内容 实验环境 基础问题回答 预备知识 实验步骤--基于Armitage的MSF自动化漏洞攻击实 ...

  2. Java集合实现类区别与联系

    ArrayList和LinkList相同点和区别: 共性: 都实现了List接口,都是list的实现类,处理list集合操作. 区别: ArrayList:底层存储结构是数组,每个元素都有index标 ...

  3. linux安装sonar

    第一步 使用上一篇博客中下载的sonar6.7.6上传到centos7 准备 安装jdk1.8 解压unzip sonarqube-6.7.6.zip 由于elasticsearch需要非root用户 ...

  4. 扫描Linux服务器查找恶意软件和rootkit的一款工具

    官网参考官网安装教程:wget https://www.clamav.net/downloads/production/clamav-0.101.1.tar.gztar -zxvf clamav-0. ...

  5. Git使用—第二讲

    前面我们学习了Git最基本的用法,包括安装Git.创建代码仓库,以及提交本地代码.下面我们将学习Git更多的使用技巧,在开始之前,我们先给一个项目创建代码仓库,这里选择在ProviderTest项目中 ...

  6. nginx安装升级及配置详解

    1.简介 2.安装配置 3.配置文件介绍 4.启动.停止.平滑重启.升级 一.Nginx简介 Nginx(engine x)是俄罗斯人Igor Sysoev编写的一款高性能的http和反向代理服务器. ...

  7. DIV实现水平或垂直滚动条

    添加样式: 在html中,需要创建2层div来实现.一个div包含另一个div: 效果:

  8. anglarjs1.6.3+owin 实现验证之一:统一拒绝非登录访问。

    1.anglarjs端在app.js(即anglar的入口js),注册.factory("messageService",使得每次来自html客户端的请求都能带有一个值,如AKey ...

  9. wpf项目打开多个窗体在任务栏只有一个任务

    原文:wpf项目打开多个窗体在任务栏只有一个任务 如果在wpf里,在一个父窗体上打开子窗体,只在任务栏显示一个任务,不是qq聊天窗口俩人聊天人显示俩给那样,只能显示 一个 private void B ...

  10. 更换pip源到国内镜像

    1.pip国内的一些镜像   阿里云 https://mirrors.aliyun.com/pypi/simple/  中国科技大学 https://pypi.mirrors.ustc.edu.cn/ ...