vue生成路由实例
一.vue路由
https://router.vuejs.org/zh-cn/
1.bower下载vue-router
vue的里的链接
<router-link to="/home"></router-link>
1.引入vue与vue-router
<script src="bower_components/vue/dist/vue.js"></script>
<script src="bower_components/vue-router/dist/vue-router.js"></script>
HTML
<div id="app">
<div>
<router-link to="/home">主页</router-link>
<router-link to="/news">新闻</router-link>
</div>
<div>
<router-view></router-view>
</div>
</div>
vue.js
var Home = {
template: "<h3>我是主页</h3>"
} var News = {
template: "<h3>我是新闻</h3>"
} // 配置路由
var routes = [
{path: "/home", component:Home},
{path: "/news", component:News},
{path: "*", redirect:"/home"} // 重定向
] // 生成路由实例
var router = new VueRouter({
routes
}) // 最后挂到vue上
new Vue({
el: "#app",
router: router })
二.vue路由嵌套
var Home = {
template: "<h3>我是主页</h3>"
} var UserDetail = {
template: "<h3>我是XX用户</h3>"
} var Uesr = {
template: `
<div class="user">
<h3>我是用户</h3>
<ul>
<li><router-link to="/user/username">某个用户</router-link></li>
</ul>
<div>
<router-view></router-view>
</div>
</div>
`
} // 配置路由
var routes = [
{path: "/home", component:Home},
{
path: "/user",
component:Uesr,
children: [
{path:"username", component:UserDetail}
]
},
{path: "*", redirect:"/home"} // 重定向
] // 生成路由实例
var router = new VueRouter({
routes
}) // 最后挂到vue上
new Vue({
el: "#app",
router: router })
三.有参数的路由, $route.params
var Home = {
template: "<h3>我是主页</h3>"
} var UserDetail = {
template: "<h3>{{$route.params}}</h3>"
} var Uesr = {
template: `
<div class="user">
<h3>我是用户</h3>
<ul>
<li><router-link to="/user/strive/age/10">strive</router-link></li>
<li><router-link to="/user/blue/age/80">blue</router-link></li>
<li><router-link to="/user/eric/age/70">eric</router-link></li>
</ul>
<div>
<router-view></router-view>
</div>
</div>
`
} // 配置路由
var routes = [
{path: "/home", component:Home},
{
path: "/user",
component:Uesr,
children: [
{path:":username/age/:age", component:UserDetail}
]
},
{path: "*", redirect:"/home"} // 重定向
] // 生成路由实例
var router = new VueRouter({
routes
}) // 最后挂到vue上
new Vue({
el: "#app",
router: router })
四.路由实例方法
1.router.push({path:"home"}); // 直接添加路由, 往历史记录里添加一个
2.router.replace({path:"home"}) // 替换路由, 不在历史记录
vue生成路由实例的更多相关文章
- vue生成路由实例, 使用单个vue文件模板生成路由
一.vue-loader与vue-router配合 $ cnpm install vue-router --save 二.生成vue-webpack模板 $ vue init webpack-simp ...
- Vue.js—组件快速入门及Vue路由实例应用
上次我们学习了Vue.js的基础,并且通过综合的小实例进一步的熟悉了Vue.js的基础应用.今天我们就继续讲讲Vue.js的组件,更加深入的了解Vue,js的使用.首先我们先了解一下什么是Vue.js ...
- vue根据后端菜单自动生成路由(动态路由)
vue根据后端菜单自动生成路由(动态路由) router.js import Vue from 'vue' import Router from 'vue-router' import store f ...
- 浅入深出Vue:路由
路由的概念在计算机界中的历史大概可以追溯到OSI模型中的数据链路层与网络层中的定义.这里的定义大意是:在转发数据包时,根据数据包的目的地址进行寻址,从而将数据包发往指定的目的地. 在 Web开发中同样 ...
- 简述Vue的路由与视图
1.vue-router 安装方式 npm/cnpm:(个人偏向于cnpm) npm/cnpm install vue-router --save-dev bower: bower install v ...
- [VUE]关于路由哪些事儿
什么是路由 之前有个小伙伴面试被问到:面试官:不用vue能不能写单页面应用?答:用angular啊(咳咳,开个玩笑),答案确实是可以的,原生js中有个事件叫做onhashchange,可以在windo ...
- Vue自动化路由(基于Vue-Router)开篇
vue自动化路由 好久不见~ 若羽又开篇Vue的内容了. 年初的时候发布了第一版的ea-router自动化路由库,欢迎大家安装使用.[Github地址] [npm地址] 经历一年的使用.还是发现了不少 ...
- vue(5)—— vue的路由插件—vue-router 常用属性方法
前端路由 看到这里可能有朋友有疑惑了,前端也有路由吗?这些难道不应该是在后端部分操作的吗?确实是这样,但是现在前后端分离后,加上现在的前端框架的实用性,为的就是均衡前后端的工作量,所以在前端也有了路由 ...
- vue学习路由嵌套
1. 路由嵌套和参数传递 传参的两种形式: a.查询字符串:login?name=tom&pwd=123 {{$route.query}} ------ <li><route ...
随机推荐
- 新建maven指定jdk版本-eclipse新建maven项目报错The superclass "javax.servlet.http.HttpServlet" was not found on the Java Build Path的解决方案
具体表现为: 使用Eclipse+Maven建立了一个Javaweb工程,JSP页面顶端出现“红色”的报错信息:The superclass "javax.servlet.http.Http ...
- iOS: 自动增高的 textView
如 iPhone 内应用“信息”的输入框一样,输入文字过多或者输入换行,输入框可以随着内容自动变化.主要是计算内容的尺寸并相应更改输入框的frame.具体表现在: 更改输入框的 frame.origi ...
- .net framework 4.0 在 VS2010 安装目录下位置 dotNetFx40_Full_x86_x64.exe在磁盘哪个目录?
.net framework 4.0 在 VS2010 安装目录下位置 dotNetFx40_Full_x86_x64.exe在磁盘哪个目录? 使用VS2010开发应用程序完毕后,在发布应用程序时,常 ...
- Window 10 :如何彻底关闭:Windows Defender Service(2015-12-20日更新)
Window 10 :如何彻底关闭:Windows Defender Service? 网上流传的什么组策略gpeidt.msc方法,什么安装其他的杀软之类的方法都很麻烦,且有弊病! 其实很简单: 利 ...
- go的精选类库
https://github.com/avelino/awesome-go https://gitee.com/snail/proxy
- Js页面刷新前提示-jquery页面刷新事件
//原理很简单,就是在body的onbeforeunload事件绑定函数,代码如下: document.body.onbeforeunload = function (event) { var c = ...
- 基于NDK的Android防破解& Android防破解 【转载】
两篇防破解文章转载 基于NDK的Android防破解:http://blog.csdn.net/bugrunner/article/details/8634585 Android防破解:http:// ...
- Android重写HorizontalScrollView仿ViewPager效果
Android提供的ViewPager类太复杂,有时候没有必要使用,所以重写一个HorizontalScrollView来实现类似的效果,也可以当做Gallery来用 思路很简单,就是重写onTouc ...
- Window系统、主函数和窗体函数这三者之间的关系
理解Window系统.主窗体.窗体函数这三者之间的关系,对于编写Windows程序十分重要. 主函数和窗体函数都是由Windows系统来调用的函数.仅仅只是主函数是程序启动之后.系统首先调用的函数: ...
- MessageDigest类提供MD5或SHA等加密算法
MessageDigest可使用的加密方法有MD2\MD5\SHA-1\SHA-256\SHA-384\SHA-512,使用时候只替换相应参数值即可 MessageDigest md5 = Messa ...