一、学习目标
- 理解路由的作用
- 掌握一级路由的配置方法(重点)
- 掌握二级路由的配置方法(重点)
- 掌握路由传参的使用方法(重点+难点)
二、路由的概述
2.1、路由的作用
- 根据url锚点路径,在容器中加载不同的模块
- 完成SPA(Single Page Application) 的开发
2.2、路由原理
- 利用锚点完成切换
- 页面不会刷新,只有局部刷新
2.3、路由功能引入
- 官方推荐使用 vue-router.js 库来引入路由功能模块
- vue-router.js下载地址:https://unpkg.com/vue-router/dist/vue-router.js
- 具体安装和使用:https://router.vuejs.org/zh/installation.html
2.4、小结
- 作用:根据URL 锚点路径,在容器中加载不同的模块
- 原理: 利用锚点完成切换
三、一级路由配置
3.1、一级路由配置方法
- 引入vue-router.js库
- 创建路由所需模块
- 使用vue.extend()方法创建模块
var Home = Vue.extend({
template: "#home"
});
3.2、分配路由路径
routes:[
{path:"/index",component:{}},
{path:"/m1", component:{}}
]
3.3、创建路由对象
var router = new VueRouter({
// 路径信息(routes)
routes: [
// {path:'自己分配的路径', component: 组件名字/组件}
{path: '/home', component: Home},
{path: '/Mine', component: Mine},
]
}),
3.4、添加路由配置项
var vm = new Vue({
el: "#app",
router: new VueRouter({
routes:[
{path:"/index", component:{}},
{path:"/m1", component:{}}
]
})
})
3.5、router-link和router-view
1.router-link
作用:使用路由去完成跳转,不需要再使用 a 标签,使用<router-link></router-link> 代替a 标签。
使用router-link:
在两对尖括号中添加文本;
to属性用来设置跳转url地址;
to = 路由配置时,routes数据中的path信息,需要填写此处
2、router-view
作用:用来占位,就是内容占位的内容不是固定的,根据你组件中模板的内容不同来切换的
使用:<router-view></router-view>
3、router-link和router-view具体使用:
<!--显示链接-->
<ul>
<li>
<!--to的值,是一级路由url-->
<router-link to="/home">home</router-link>
</li>
</ul>
<!--显示内容-->
<div class="show">
<!--占位,即显示路由模板中的内容,如果是/home就显示home下的模板内容-->
<router-view></router-view>
</div>
<script src="js/vue.js"></script>
<script src="js/vue-router.js"></script>
<script>
var vm = new Vue({
el: "#box",
data: {},
router: new VueRouter({
routes: [
// '/home'是一级路由的url
{path: "/home",component:{template:'<h2>首页</h2>'}
},
}),
});
</script>
3.6、实现路由切换实例
1、实现的效果图
2、不剥离路由实例的写法
说明:就是路由实例和路由路径都是些在 vue实例中,一般情况下不会用这种方式,代码如下:
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
<!DOCTYPE html> <!--suppress ALL --> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> li {list-style: none;display: inline-block;margin: 20px 10px;} a {text-decoration: none;} .show {width: 300px;height: 200px;background: #ccc} </style> </head> <body> <div id="box"> <ul> <li> <router-link to="/home">home</router-link> </li> <li> <router-link to="/news">news</router-link> </li> <li> <router-link to="/hot">hot</router-link> </li> </ul> <div class="show"> <router-view></router-view> </div> </div> <!-- 使用路由去完成跳转,就不再使用 a 标签了; 使用<router-link></router-link> 代替a 标签 router-link: 在两对尖括号中添加文本; to属性用来设置跳转url地址; to = 路由配置时,routes数据中的path信息,需要填写此处 router-view: 作用:用来占位,就是内容占位的内容不是固定的,根据你组件 中模板的内容不同来切换的 使用:<router-view></router-view> --> <script src="js/vue.js"></script> <!-- 一级路由的配置: 1、引入 vue-router.js 库 --> <script src="js/vue-router.js"></script> <script> var vm = new Vue({ el: "#box", data: {}, //添加路由配置项 // router: 路由实例(对象) // router:new VueRouter() //设置路由对象的配置项 /* new VueRouter({ 路径信息: 路径信息放在数组中 routes: [ {path:'url',component:'组件'} ] }) */ router: new VueRouter({ routes: [ // 路径命名: '/+小写单词' {path: "/home",component:{template:'<h2>首页</h2>'} }, {path: "/news",component:{template:'<h2>新闻</h2>'} }, {path: "/hot",component:{template:'<h2>热点</h2>'} }, ] }), }); </script> </body> </html>
3、剥离路由实例的写法
说明:就是路由实例和路由路径独立出来,推荐用这种方式,代码如下:
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
<!DOCTYPE html> <!--suppress ALL --> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> li {list-style: none;display: inline-block;margin: 20px 10px;} a {text-decoration: none;} .show {width: 300px;height: 200px;background: #ccc} </style> </head> <body> <div id="box"> <ul> <li> <!-- 相当于a链接; to用来设置路径信息,相当于href --> <router-link to="/home">home</router-link> </li> <li> <router-link to="/news">news</router-link> </li> <li> <router-link to="/hot">hot</router-link> </li> </ul> <!--显示的内容一定要在实例的容器中,不然不显示--> <div class="show"> <!-- 用来进行占位 --> <router-view></router-view> </div> </div> <template id="home"> <div> <h2>首页</h2> <ul> <li>今日热点</li> <li>体育新闻</li> <li>关爱八卦成长协会</li> </ul> </div> </template> <script src="js/vue.js"></script> <!--使用路由功能,引入 vue-router.js 库--> <script src="js/vue-router.js"></script> <script type="text/javascript"> //1.准备路由所需模块(组件) //全局vue下,有extend(),用来注册路由所需的模块(组件) //模块名称,首字母大写 var Home = Vue.extend({ template: "#home" }); var News = Vue.extend({ template: "<h1>news</h1>" }); var Hot = Vue.extend({ template: "<h1>hot</h1>" }); //2、配置路径信息 var routes = [ //路径变量可以写任何,但是一般情况下都写成routes //{path:'url',component: 组件名称} {path: '/home',component: Home}, {path: '/news',component: News}, {path: '/hot',component: Hot}, ]; //3、创建路由对象 var router = new VueRouter({ //配置项 //routes: 存储路径信息的数据 //routes:arr //es6新语法:如果配置项名称与后方配置项名称相同可以简写 routes // (缩写)相当于 routes: routes }); var vm = new Vue({ el: "#box", data: { }, //添加路由配置项 //router: 路由对象 router //名称和配置相同,相当于,router: router }); //路由重定向 //push(): 路由对象自带方法,进行路径跳转 push('url') router.push('/home'); </script> </body> </html>
注意:占位符的div一定要在实例的容器(id=box)中,这个问题排查好长时间。
四、路由重定向
4.1、路由重定向
- 路由对象:$router
- 路由跳转方法: push()
- 语法:$router.push(‘url地址’)
4.2、重定向两种方式
接下来练习:就是点击刷新,就直接跳转到home页面。
①在页面创建之前,进行重定向,注意,这种方式,不管剥离还是不剥离都是可以这么写的。
beforeCreate: function(){
//合起来的话,就是重新生成页面的时候,重定向到首页
this.$router.push('/home');
},
如图:
②在vue的实例之前重定向,这种方式只能是剥离路由实例情况下这么写:
//路由重定向
//push(): 路由对象自带方法,进行路径跳转 push('url')
router.push('/home');
如图:
五、二级路由配置
5.1、配置二级路由路径信息
说明:在一级路由的配置项中,用children配置项,来配置二级路由的信息。
routes: [
{path: '/hot', component: Hot,children: [
// 二级路由中,路径不要加 /
{path:'01',component:{template: '<p>010101010</p>'}},
{path:'03',component:{template: '<p>333333333</p>'}},
]},
{path: '/mine', component: Mine},
]
5.2、配置模板
<template id="hot">
<div>
<h1>hothot</h1>
<router-link to="/hot/01">新闻001</router-link>
<router-link to="/hot/02">新闻002</router-link>
<router-link to="/hot/03">新闻003</router-link>
<router-view></router-view>
</div>
</template>
5.3、二级路由实例
1、效果图:
2、代码如下:
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
<!DOCTYPE html> <!--suppress ALL --> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> li {list-style: none;display: inline-block;margin: 20px 10px;} a {text-decoration: none;} .show {width: 300px;height: 200px;background: #ccc} </style> </head> <body> <div id="box"> <!--显示的内容一定要在实例的容器中,不然不显示--> <div class="show"> <!-- 用来进行占位 --> <router-view></router-view> </div> <ul> <li> <!-- 相当于a链接; to用来设置路径信息,相当于href --> <router-link to="/home">home</router-link> </li> <li> <router-link to="/news">news</router-link> </li> <li> <router-link to="/hot">hot</router-link> </li> </ul> </div> <template id="home"> <div> <h2>首页</h2> </div> </template> <template id="news"> <div> <h1>news</h1> <!--配置模板--> <router-link to="/news/film">films</router-link> <router-link to="/news/tv">tv</router-link> <router-view></router-view> </div> </template> <script src="js/vue.js"></script> <!--使用路由功能,引入 vue-router.js 库--> <script src="js/vue-router.js"></script> <script type="text/javascript"> //1.准备路由所需模块(组件) //全局vue下,有extend(),用来注册路由所需的模块(组件) //模块名称,首字母大写 var Home = Vue.extend({ template: "#home" }); var News = Vue.extend({ template: "#news" }); var Hot = Vue.extend({ template: "<h1>hot</h1>" }); //2、配置路径信息 var routes = [ //路径变量可以写任何,但是一般情况下都写成routes //{path:'url',component: 组件名称} {path: '/home',component: Home}, {path: '/news',component: News,children:[ //配置二级路由信息 {path:'film',component:{ template: "<p>电影: 无双、影</p>" } }, {path: 'tv',component:{ template:'<p>屌丝男士</p>' } }, ]}, {path: '/hot',component: Hot}, ]; //3、创建路由对象 var router = new VueRouter({ //配置项 //routes: 存储路径信息的数据 //routes:arr //es6新语法:如果配置项名称与后方配置项名称相同可以简写 routes // (缩写)相当于 routes: routes }); var vm = new Vue({ el: "#box", data: { }, //添加路由配置项 //router: 路由对象 router //名称和配置相同,相当于,router: router }); //路由重定向 //push(): 路由对象自带方法,进行路径跳转 push('url') router.push('/home'); </script> </body> </html>
说明:router-view:路由匹配到的组件将渲染在这里。分配二级路由路径时,路径前不加 ‘/’,这边要注意的时候,我们一般进入一个页面要有默认页面,所以二级理由是这样是这样设置,默认二级路由path为空,就会跳转首页:
六、路由传参
6.1、参数接收和传递
1、传递参数
<router-link to='/news/001'></router-link>
2、接收参数
$router.params:id
6.2、路由传参实例
显示页面如下:
代码如下:
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> a {text-decoration: none;} .show {width: 300px;height: 200px;background: #eee} </style> </head> <body> <div id="box"> <p> <router-link to="/home">home</router-link> <router-link to="/news">news</router-link> </p> <div class="show"> <router-view></router-view> </div> </div> <template id="home"> <div> <h2>首页</h2> </div> </template> <template id="news"> <div> <h2>新闻</h2> <li> <router-link to="/news/0">新闻000</router-link> <router-link to="/news/1">新闻001</router-link> <!-- 传递参数: 通过点击不同的router-link进行传递,将二级的路劲信息进行转换 --> </li> </div> </template> <template id="nd"> <div> <p>新闻详情页</p> <!-- 接收参数: $route.params.id 进行接收 --> <span>这是传过来的参数:{{ arr[$route.params.id] }}</span> </div> </template> <script src="js/vue.js"></script> <script src="js/vue-router.js"></script> <script type="text/javascript"> var Home = Vue.extend({ template: "#home" }); var News = Vue.extend({ template: "#news" }); // 显示新闻详情页,需要为新闻详情页配置路劲信息 // 二级路径 /:id var NewsDetail = Vue.extend({ template: '#nd', data: function () { return{ arr: ['秀春刀','战狼二'] }; } }); var routes = [ {path:'/home',component: Home}, {path:'/news',component: News}, // /:id方式传参 {path:'/news/:id',component: NewsDetail}, ]; var router = new VueRouter({ routes }); var vm = new Vue({ el: "#box", data: {}, router }); router.push('/home'); </script> </body> </html>
总结:
- 传参原理: 通过 $router 对象上的params参数获取传递过来的id