Vue-router(vue2.0)用法示例
一.新建3个组件
1./src/components/post.vue
<template>
<div>
hello world! this is POST!
</div>
</template> <script>
export default { }
</script>
2./src/components/view.vue
<template>
<div>
hello world! this is VIEW!
</div>
</template> <script>
export default { }
</script>
3./src/components/vote.vue
<template>
<div>
hello world! this is VOTE!
</div>
</template> <script>
export default { }
</script>
二.路由
1.入口文件main.js,导入路由
import router from './router'
可以看到router是从router这个文件夹中引入的
2.打开router文件夹下的index.js,加入两个路由post和view
import Vue from 'vue'
import Router from 'vue-router'
import post from '@/components/post'
import view from '@/components/view' // 注册路由
Vue.use(Router) export default new Router({
mode: 'history',
routes: [
{ path: 'post', name: 'post', component: post },
{ path: 'view', name: 'view', component: view }
]
})
PS:mode有三种模式
(1).hash模式:使用URL hash值来作为路由。支持所有浏览器。默认,这会在地址栏中出现#
(2).history模式:依赖HTML5 History API和服务器配置。查看HTML5 History模式。
(3).abstract模式:支持所有JavaScript运行环境,如Node.js服务器端。如果发现没有浏览器的API,路由会自动强制进入这个模式。
三.使用路由
1.app.vue中写入
<template>
<div id="app">
<img src="./assets/logo.png">
<router-link :to="/post">post</router-link>
<router-link :to="{ name: 'view', params: {} }">view</router-link>
<router-view></router-view>
</div>
</template> <script>
export default {}
</script>
2.解释点:
(1)router-link
a.router-link是一个组件,它默认会被渲染成一个带有链接的a标签,通过to属性指定链接地址
b.to:这是一个必须设置的属性,否则路由无法生效。除了使用name,也可以是用path
<router-link to="/post">post</router-link>
c.replace
一个布尔类型,默认为false。如果replace设置为true,那么导航不会留下history记录,点击浏览器回退按钮不会再回到这个路由。
d.tag
router-link默认渲染成a标签,也有方法让它渲染成其他标签,tag属性就用来设置router-link渲染成什么标签的。
(2).router-view
这个组件十分关键,它就是用来渲染匹配到的路由的。可以附加transition过渡,也可以配合<keep-alive>来缓存数据.
四.动态路由(携带参数的路由)
1.使用路由命名name
(1).修改view组件:
<template>
<div>
hello world! this is VIEW! {{ $route.params.id }}
</div>
</template> <script>
export default { }
</script>
(2).修改App.vue
<router-link :to="{ name: 'view', params: {id: 10} }">view</router-link>
2.使用路由path
(1).修改router下的index.js
{ path: '/view/:id', name: 'view', component: view }
(2).修改App.vue
<router-link to="/view/10">view</router-link>
(3).修改view.vue
<template>
<div>
hello world! this is VIEW! {{ $route.params.id }}
</div>
</template> <script>
export default { }
</script>
五.嵌套路由(在组件中使用路由)
我们实现在view组件中包含post组件和vote组件
1.改写App.vue
<template>
<div id="app">
<img src="./assets/logo.png">
<router-link :to="{ name: 'post', params: {} }">post</router-link>
<router-link :to="{ name: 'view', params: {} }">view</router-link>
<router-view></router-view>
</div>
</template> <script>
export default {}
</script>
2.改写router/index.js
export default new Router({
mode: 'history',
routes: [
{
path: '/view',
name: 'view',
component: view,
children: [
{ path: '/post', name: 'post', component: post },
{ path: '/vote', name: 'vote', component: vote }
]
}
]
})
3.改写view.vue
<template>
<div>
<router-link :to="{ name: 'post', params: {} }">post</router-link>
<router-link :to="{ name: 'vote', params: {} }">vote</router-link>
<router-view></router-view>
</div>
</template> <script>
export default { }
</script>
六.导航式编程router.push()
点击router-link时执行的就是router.push()的方法,我们可以单独给它一个点击事件,同样可以实现跳转
<template>
<div id="app">
<img src="./assets/logo.png">
<router-link :to="{ name: 'post', params: {} }">post</router-link>
<router-link :to="{ name: 'view', params: {} }">view</router-link>
<button @click="goView">跳转</button>
<router-view></router-view>
</div>
</template> <script>
export default {
methods: {
goView () {
this.$router.push('/view')
}
}
}
</script>
最新文章
- C代码实现数组
- Jquery中的日历插件
- ACM/ICPC 之 BFS(离线)+康拓展开(TSH OJ-玩具(Toy))
- HashCode作用
- jquery checkbox的判断和设置方法
- Verilog Tips and Interview Questions
- 动态网页爬取例子(WebCollector+selenium+phantomjs)
- IntelliJ IDEA提示:Error during artifact deployment. See server log for details.
- react+flux编程实践(一) 基础篇
- 使用JavaScript循环嵌套解决各种图形
- 高通开发笔记---Yangtze worknote
- poj3126 Prime Path 广搜bfs
- Laravel5.5+ 区分前后端用户登录
- poj2342 Anniversary party
- Unity中巧用协程和游戏对象的生命周期处理游戏重启的问题
- leetcode985
- ClsoSee(v2) Alpha测试中!这是一个临时的帮助页面...
- Uboot命令U_BOOT_CMD
- 【spring源码学习】spring的task配置
- [Training Video - 7] [Database connection] Various databases which are supported, Drivers for database connection, SQL Groovy API
热门文章
- sql 查找表引用的存储过程
- MATLAB7 + sqlitejdbc-v056.jar 访问数据库
- glOrthof 与glFrustumf
- l2tp连接不上,修复
- (21)C#VS快捷键
- codevs 3961 硬币找零【完全背包DP/记忆化搜索】
- Codeforces Round #306 (Div. 2) A. Two Substrings【字符串/判断所给的字符串中是否包含不重叠的“BA” “AB”两个字符串】
- Python的网络编程[5] ->; BOOTP + TFTP + FTP ->; 实现一个简单的文件传输流程
- Oracle PL/SQL DBA 编程实践基础
- iOS AudioSession详解 Category选择 听筒扬声器切换