vue router 只需要这么几步
<!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 只需要这么几步的更多相关文章
- Vue Router详细教程
1.什么是路由 1.1路由简介 说起路由你想起了什么?路由是一个网络工程里面的术语. 路由(routing)就是通过互联的网络把信息从源地址传输到目的地址的活动. --- 维基百科 额,啥玩意? 没听 ...
- Vue Router学习笔记
前端的路由:一个地址对应一个组件 Vue Router中文文档 一.路由基本使用 第1步:导入Vue Router: <script src="https://unpkg.com/vu ...
- 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 ...
- 前端MVC Vue2学习总结（八）——Vue Router路由、Vuex状态管理、Element-UI
一.Vue Router路由 二.Vuex状态管理 三.Element-UI Element-UI是饿了么前端团队推出的一款基于Vue.js 2.0 的桌面端UI框架,手机端有对应框架是 Mint U ...
- 深入浅出的webpack4构建工具---webpack+vue+router 按需加载页面(十五)
1. 为什么需要按需加载? 对于vue单页应用来讲,我们常见的做法把页面上所有的代码都打包到一个bundle.js文件内,但是随着项目越来越大,文件越来越多的情况下,那么bundle.js文件也会越来 ...
- 深入浅出的webpack构建工具--webpack4+vue+router项目架构(十四)
阅读目录 一:vue-router是什么? 二:vue-router的实现原理 三:vue-router使用及代码配置 四:理解vue设置路由导航的两种方法. 五:理解动态路由和命名视图 六:理解嵌套 ...
- python 全栈开发，Day91(Vue实例的生命周期,组件间通信之中央事件总线bus,Vue Router,vue-cli 工具)
昨日内容回顾 0. 组件注意事项!!! data属性必须是一个函数! 1. 注册全局组件 Vue.component('组件名',{ template: `` }) var app = new Vue ...
- vue.js利用vue.router创建前端路由
node.js方式: 利用node.js安装vue-router模块 cnpm install vue-router 安装完成后我们引入这个模板! 下载vue-router利用script引入方式: ...
- 10.vue router 带参数跳转
vue router 带参数跳转 发送:this.$router.push({path:'/news',query:{id:row.id}}) 接收:var id=this.$route.query. ...
随机推荐
- 【驱动】USB驱动·入门
[驱动]USB驱动·入门 Preface USB是目前最流行的系统总线之一.随着计算机周围硬件的不断扩展,各种设备使用不同的总线接口,导致计算机外部总线种类繁多,管理困难.USB总线正是因此而诞生的. ...
- Windows Azure功能更新：弹性伸缩(autoscale)、监控报警、移动服务及网站服务商用、新的虚拟机镜像
Windows Azure功能又更新了.此次更新包括1项重要更新和两个功能更新: 重要更新:云服务.网站支持按策略进行弹性伸缩 功能更新:两个预览版的服务(网站和移动)进入商用,虚拟机服务支持SQL ...
- spring_boot打jar包及打包错误的解决方法
问题产生及解决 对于刚接手spring_boot的人,可能会感觉到很茫然无措,看到书上写的spring_boot是直接打包成jar包,使用java -jar *运行.然而却不知道该怎么打包.而创建sp ...
- html标签详解，html标签属性大全（完美版），包括css属性详解
这个是平时放在笔记里,需要什么了,查下当字典用,想不起来了就查下,个人在用有道云,查询框一输就找到了.下篇会把我整理手机的html5发了.引用在某处常看到的话.楼主耗时费心整理··请拿走······· ...
- 使用Unity创建塔防游戏（Part2）
How to Create a Tower Defense Game in Unity – Part 2 原文地址:https://www.raywenderlich.com/107529/unity ...
- mysql建立、删除索引及使用
同步发布:http://www.yuanrengu.com/index.php/2017-01-13.html 一.索引的作用 一般的应用系统,读写比例在10:1左右,而且插入操作和一般的更新操作很少 ...
- css透明度(兼容所有浏览器)
.transparent{ background: rgba(, , , 0.3) !important; /* IE无效,FF有效 */ filter: alpha(opacity=); -moz- ...
- Flexible 弹性盒子模型之CSS flex-wrap 属性
实例 让弹性盒元素在必要的时候拆行: display:flex; flex-wrap: wrap; 复制 效果预览 浏览器支持 表格中的数字表示支持该属性的第一个浏览器的版本号. 紧跟在 -webki ...
- 2015 ACM / ICPC 亚洲区域赛总结（长春站&北京站）
队名:Unlimited Code Works(无尽编码) 队员:Wu.Wang.Zhou 先说一下队伍:Wu是大三学长:Wang高中noip省一:我最渣,去年来大学开始学的a+b,参加今年区域赛之 ...
- rabbitMQ 安装 could not set correct interactive mode
安装rabbit mq 提示下面错误 其他信息: 执行错误:C:\Program Files\erl6.0\erts-6.0\bin\erlsrv: Warning, could not set co ...