Vue(基础六)_vue-router
一、前言
本文主要涉及：
1、传统方式路由的实现
2、使用vue-router
3、路由命名
4、动态路由
5、嵌套路由
二、主要内容
1、传统方式路由的实现：
（1）当URL改变之后，立刻会发生请求响应整个页面，如果此时的资源过多，会出现白屏现象
（2）单页面应用，锚点值改变，不会立刻发送请求，而是在某个合适的时机，发送请求
案例如下：通过onhashchange事件来判断是否hash值发生改变，location.hash就是url中#后面的部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<a href="#login">登录页面</a>
<a href="#/register">注册页面</a>
<div id='app'> </div>
<script type="text/javascript">
var oDiv = document.getElementById('app');
window.onhashchange = function(){
console.log(location.hash) switch(location.hash) {
case '#login':
oDiv.innerHTML = '<h2>我是登录页面</h2>'
break; case '#/register':
oDiv.innerHTML = '<h2>我是注册页面</h2>'
break; default:
break;
}
}
</script> </body>
</html>
2、使用vue-router可以快速帮我们实现上面的操作
使用步骤：1）引入vue-router.js和vue.js(vue-router是依赖于vue的)
2）让vue使用该VueRouter创建，在vue-router.js中可以看到最后返回的是VueRouter这个对象
3）创建路由对象
4）在var router = new VueRouter（）里面配置路由对象
5）vue-router模块引入对象一加载就为我们提供了两个全局组件:
<router-link>:相当于a标签 ，
<router-link to='xxx'>:to相当于href
<router-view>是路由组件的出口
实例如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id='app'> </div>
<script type="text/javascript" src="node_modules/vue/dist/vue.js"></script>
<script type="text/javascript" src="node_modules/vue-router/dist/vue-router.js"></script> <script type="text/javascript">
//2.让vue使用该VueRouter创建,全局的对象可以省略这句话
Vue.use(VueRouter); //3.创建路由对象
var Login = {
template:"<div>我是登录页面</div>"
}
var Register = {
template:"<div>我是登注册页面面</div>"
}
var router = new VueRouter({ //4.配置路由对象
routes:[ //路由匹配规则
{
path:"/login",
component:Login
}, {
path:"/register",
component:Register
} ]
}); var App = {
template:`<div>
<router-link to='/login'>登录</router-link>
<router-link to='/register'>注册</router-link>
<!--路由组件的出口-->
<router-view></router-view>
</div>
`
} //5.将配置好的路由对象关联到vue实例化对象中
new Vue({
el:'#app',
router:router,//6.交给这个实例化对象去管理 template:`<App />`,
components:{
App
}
})
</script> </body>
</html>
vue-router的使用.html
3、路由命名
4、动态路由：url地址中可能还会带有参数，根据参数来区分访问
1） 比如地址栏后面带数字：
2）地址栏后面是查询语句形式：
3）地址栏后面是hash值
演示动态路由参数如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id='app'> </div>
<script type="text/javascript" src="node_modules/vue/dist/vue.js"></script>
<script type="text/javascript" src="node_modules/vue-router/dist/vue-router.js"></script> <script type="text/javascript">
//2.让vue使用该VueRouter创建,全局的对象可以省略这句话
Vue.use(VueRouter); //3.创建路由对象
var UserParams = {
template:"<div>我是用户1</div>",
created(){
console.log(this.$router);
console.log(this.$route);
}
} var UserQuery = {
template:"<div>我是用户2</div>",
created(){
console.log(this.$route)
}
} var router = new VueRouter({ //4.配置路由对象
routes:[ //路由匹配规则
{
path:"/user/:id",
name:'userP',
component:UserParams
}, {
path:"/user",
name:'userQ',
component:UserQuery
} ]
}); var App = {
template:`<div>
<router-link :to="{name:'userP',params:{id:1}}">登录</router-link>
<router-link :to="{name:'userQ',query:{userId:2}}">注册</router-link> <router-view></router-view>
</div>
`
} //5.将配置好的路由对象关联到vue实例化对象中
new Vue({
el:'#app',
router:router,//6.交给这个实例化对象去管理 template:`<App />`,
components:{
App
} })
</script> </body>
</html>
动态路由参数演示.html
输出this.$route查看
5、嵌套路由：比如掘金官网，点击上面大的导航栏渲染出下面的内容，在下面的内容中又有小的导航栏可以让我们切换内容
演示代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id='app'> </div>
<script type="text/javascript" src="node_modules/vue/dist/vue.js"></script>
<script type="text/javascript" src="node_modules/vue-router/dist/vue-router.js"></script> <script type="text/javascript">
var Song = {
template:'<div>我是歌曲主键</div>'
} var Movie = {
template:"<div>电影组件</div>"
} var Home = {
template:`<div>
首页内容
<br />
<router-link to='/home/song'>歌曲</router-link>
<router-link to='/home/movie'>电影</router-link>
<router-view></router-view>
</div>`
} var router = new VueRouter({
routes:[
{
path:"/home",
name:'home',
component:Home,
children:[ //嵌套路由的使用
{
path:'song',
component:Song
},
{
path:'movie',
component:Movie
} ]
} ]
}) var App = {
template:`<div>
<router-link :to="{name:'home'}">首页</router-link> <router-view></router-view>
</div>
`
} //5.将配置好的路由对象关联到vue实例化对象中
new Vue({
el:'#app',
router:router,//6.交给这个实例化对象去管理 template:`<App />`,
components:{
App
} })
</script> </body>
</html>
嵌套路由.html
三、总结
Vue(基础六)_vue-router的更多相关文章
- Vue(基础六)_嵌套路由（续）
一.前言 1.路由嵌套里面的公共路由 2.keep-alive路由缓存 3.导航守卫 二.主要内容 ...
- Vue(基础五)_vue中用ref和给dom添加事件的特殊情况
一.前言 这篇文章涉及的主要内容有: 1.ref绑定在标签上是获取DOM对象 2.ref绑定在子组件上获取的是子组件对象 3.案列:自动获取input焦点 二.主要内容 1.基础内容: ref 被用来 ...
- vue基础六
列表渲染 1.v-for 我们用 v-for 指令根据一组数组的选项列表进行渲染. v-for 指令需要以 item in items 形式的特殊语法(也可以用of代替in), items是源数据数组 ...
- day 84 Vue学习六之axios、vuex、脚手架中组件传值
Vue学习六之axios.vuex.脚手架中组件传值 本节目录 一 axios的使用 二 vuex的使用 三 组件传值 四 xxx 五 xxx 六 xxx 七 xxx 八 xxx 一 axios的 ...
- 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 二十║Vue基础终篇：传值+组件+项目说明
缘起 新的一天又开始啦,大家也应该看到我的标题了,是滴,Vue基础基本就到这里了,咱们回头看看这一路,如果你都看了,并且都会写了,那么现在你就可以自己写一个Demo了,如果再了解一点路由,ajax请求 ...
- 2-5 vue基础语法
一.vue基础语法 语法: {{msg}} html赋值: v-html="" 绑定属性: v-bind:id="" 使用表达式: {{ok? "ye ...
- Vue 基础篇
Vue 基础篇 一.框架与库的区别 JQ库->DOM(DOM操作) + Ajax请求 art-template库->模板引擎 框架 -> 全方位.功能齐全 简易的DOM体验 + 发请 ...
- Vue基础简介
目录 vue基础 一.导入vue 二.vue挂载点 三.vue变量 四.vue事件 五.vue文本指令 六.vue事件指令 七.vue属性指令 vue基础 一.导入vue 补充:vue的语句以及导入j ...
- Vue基础系列（五）——Vue中的指令（中）
写在前面的话: 文章是个人学习过程中的总结,为方便以后回头在学习. 文章中会参考官方文档和其他的一些文章,示例均为亲自编写和实践,若有写的不对的地方欢迎大家和我一起交流. VUE基础系列目录 < ...
随机推荐
- 利用H5 FormData 实现表单中多图上传（可带其他如String类型数据）
本篇的具体思路来源于右侧网址:http://blog.csdn.net/qq_19551571/article/details/49977983 本篇代码有所修改,请具体区分. 本篇使用的是 form ...
- 中断MSI INTA
转载https://blog.csdn.net/huangkangying/article/details/11178425 MSI VS INTx(Pin-based interrupt) MSI的 ...
- poj-2406（kmp水题）
题意:定义一个a*b=字符串a连接字符串b:给你一个字符串s,问你这个字符串最多能用多少个字符串t连接得到:例如:aaaa=4个a构成: 解题思路:kmp水题,next数组除了查找字串以外最广泛的一种 ...
- css溢出显示省略号
单行溢出省略号 .show-detail li .info-name { width:278px; display:inline-block; /*下面是重点*/ overflow: hidden; ...
- 数据库SQL SELECT查询的工作原理
一般开发员只会应用SQL的四条经典语句:select,insert,delete,update.但是我从来没有研究过它们的工作原理,这篇我想说一说select在数据库中的工作原理. B/S架构中最经典 ...
- 洛谷P1007独木桥题解
题目 这个题看起来很难,但是只要理解了题目,一切都显得简单. 你只需想象出来每个人在碰撞之后仅仅是交换了灵魂, 这样一来,代码就好写了. 附代码: #include<iostream> # ...
- IDEA+Maven+多个Module模块（创建多模块SpringBoot整合项目）
最近在学习springboot,先从创建项目开始,一般项目都是一个项目下会有多个模块,这里先创建一个最简单的实例,一个项目下有一个springboot模块项目提供web服务,引用另一个java项目(相 ...
- 【XSY2709】count DP
题目描述 有一个序列\(A\),你可以随意排列这个序列,设\(s=\sum_{i=1}^{n-1}|a_i-a_{i+1}|\) . 问你最终\(s\leq m\)的方案数有几种. 保证\(A\)中的 ...
- CS Academy Sliding Product Sum（组合数）
题意 有一个长为 \(N\) 的序列 \(A = [1, 2, 3, \dots, N]\) ,求所有长度 \(\le K\) 的子串权值积的和,对于 \(M\) 取模. \(N \le 10^{18 ...
- Centos 7.3 安装Grafana 6.0
grafana简介 Grafana是一个完全开源的度量分析与可视化平台,可对来自各种各种数据源的数据进行查询.分析.可视化处理以及配置告警. Grafana支持的数据源: 官方:Graphite,In ...