<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>hello world</title>
</head>
<body>
<div id="app">
<div>
<!-- 4、<router-link>默认会被渲染成一个 `<a>` 标签 ,to指令跳转到指定路径 -->
<router-link to="/home">Go to Home</router-link>
<router-link to="/about">Go to About</router-link>
</div>

<!-- 5、在页面上使用<router-view></router-view>标签，用于渲染匹配的组件 -->
<router-view></router-view>
</div>

<!-- 0、引入依赖库 -->
<script src="../js/vue.min.js"></script>
<script src="../js/vue-router.min.js"></script>

<script type="text/javascript">
/* 1、创建组件 */
const Home = Vue.extend({
template: '<div><h1>Home</h1><p>{{msg}}</p></div>',
data: function() {
return {
msg: 'Hello, vue router!'
}
}
});
const About = Vue.extend({
template: '<div><h1>About</h1><p>This is the tutorial about vue-router.</p></div>'
});

// 2. 创建 router 实例，然后传 `routes`路由映射 配置
const router = new VueRouter({
routes: [
{ path: '/home', component: Home },
{ path: '/about', component: About },
{ path: '/', component: Home } //设置默认路径
]
});

//先把路由配置好， 再把配置好的路由， 装到vue里面去

// 3. 创建和挂载根实例。记得要通过 router 配置参数注入路由，从而让整个应用都有路由功能
const vm = new Vue({
router: router
}).$mount('#app');

// 现在，应用已经启动了！
</script>
</body>
</html>

vue router 只需要这么几步的更多相关文章

  1. Vue Router详细教程

    1.什么是路由 1.1路由简介 说起路由你想起了什么?路由是一个网络工程里面的术语. 路由(routing)就是通过互联的网络把信息从源地址传输到目的地址的活动. --- 维基百科 额,啥玩意? 没听 ...

  2. Vue Router学习笔记

    前端的路由:一个地址对应一个组件 Vue Router中文文档 一.路由基本使用 第1步:导入Vue Router: <script src="https://unpkg.com/vu ...

  3. vue router.push(),router.replace(),router.go()和router.replace后需要返回两次的问题

    转载:https://www.cnblogs.com/lwwen/p/7245083.html https://blog.csdn.net/qq_15385627/article/details/83 ...

  4. 前端MVC Vue2学习总结（八）——Vue Router路由、Vuex状态管理、Element-UI

    一.Vue Router路由 二.Vuex状态管理 三.Element-UI Element-UI是饿了么前端团队推出的一款基于Vue.js 2.0 的桌面端UI框架,手机端有对应框架是 Mint U ...

  5. 深入浅出的webpack4构建工具---webpack+vue+router 按需加载页面(十五)

    1. 为什么需要按需加载? 对于vue单页应用来讲,我们常见的做法把页面上所有的代码都打包到一个bundle.js文件内,但是随着项目越来越大,文件越来越多的情况下,那么bundle.js文件也会越来 ...

  6. 深入浅出的webpack构建工具--webpack4+vue+router项目架构(十四)

    阅读目录 一:vue-router是什么? 二:vue-router的实现原理 三:vue-router使用及代码配置 四:理解vue设置路由导航的两种方法. 五:理解动态路由和命名视图 六:理解嵌套 ...

  7. python 全栈开发，Day91(Vue实例的生命周期,组件间通信之中央事件总线bus,Vue Router,vue-cli 工具)

    昨日内容回顾 0. 组件注意事项!!! data属性必须是一个函数! 1. 注册全局组件 Vue.component('组件名',{ template: `` }) var app = new Vue ...

  8. vue.js利用vue.router创建前端路由

    node.js方式: 利用node.js安装vue-router模块 cnpm install vue-router 安装完成后我们引入这个模板! 下载vue-router利用script引入方式: ...

  9. 10.vue router 带参数跳转

    vue router 带参数跳转 发送:this.$router.push({path:'/news',query:{id:row.id}}) 接收:var id=this.$route.query. ...

随机推荐

  1. HNCU1323：算法2-1：集合union (线性表)

    http://hncu.acmclub.com/index.php?app=problem_title&id=111&problem_id=1323 题目描述 假设利用两个线性表LA和 ...

  2. computer专业术语总结

    计算机专业真可谓是博大精深,光语言就有N多种,而且各种算法计数,各个领域,加之新技术的不断出现, 如果想要穷尽 计算机的知识,那绝对是不那个可能的,只能在若干领域才能取得一定的成果,但是多了解一些专业 ...

  3. C语言相关的经典书籍(附Ebook)

    个人稍微分了一下类,有的看过,有的听人“传说过”,欢迎大家补充和共同学习. 真心经典:每个行业或者领域都有一些东西是不会随时间而逐渐消逝,以下的就是. <C语言程序设计>(第2版.新版) ...

  4. CSUOJ 1299 - Number Transformation II 打表预处理水DP

    http://122.207.68.93/OnlineJudge/problem.php?id=1299 第二个样例解释.. 3 6 3->4->6..两步.. 由此可以BFS也可以DP. ...

  5. anadonca环境配置和模块安装

    1.最方便的python环境配置: 下载anaconda即可,自带spyder,集成科学计算的库,自带pip,不用折腾. 想用sublime编写python并运行的话,需要自己配置编译环境,并下载插件 ...

  6. .Net程序员学用Oracle系列(8)：触发器、任务、序列、连接

    <.Net程序员学用Oracle系列:导航目录> 本文大纲 1.触发器 1.1.创建触发器 1.2.禁用触发器 & 启用触发器 & 删除触发器 2.任务 2.1.DBMS_ ...

  7. C++中的异常

    一,异常的推演 1.函数与异常 平时我们在函数中出现异常情况时通常通过return终止函数并返回一个值,然后在函数上层来获取值并判断是什么异常情况.因为函数是栈结构的,所以return的时候是通过栈结 ...

  8. VS2015下的Android开发系列02——用VS开发第一个Android APP

    配置Android模拟器 这算是第一篇漏下说的,配置好VS的各参数,新建Android项目后,会发现菜单下的工具栏会多出Android相关的工具栏,红色圈出的就是AVD. 打开AVD后可以从模版处选一 ...

  9. 蓝桥杯 C语言 入门训练 Fibonacci数列

    问题描述 Fibonacci数列的递推公式为:Fn=Fn-1+Fn-2,其中F1=F2=1. 当n比较大时,Fn也非常大,现在我们想知道,Fn除以10007的余数是多少. 输入格式 输入包含一个整数n ...

  10. SQL Server存储过程同时返回分页结果集和总数

    前言 好长时间没摸数据库了,周末在家写了个报表的存储过程,一时间对使用存储过程实现分页的同时并计算出记录总数不知道怎么更好的去实现.按照我们正常的业务逻辑,存储过程数据首先是分页,其次接受若干查询条件 ...