一、什么是VueRouter?
VueRouter是Vue的生态系统之一,是Vue的核心插件,能更好的完成单页面多视图的功能。
简单来说就是一个html页面有多个视图,而通过VueRouter可以实现我们需要显示哪块视图,就显示哪块视图,并且可以做到代码复用,提高编码效率。
二、使用VueRouter
首先需要先引入相关Vue,和VueRouter相关文件,(如果单独引入VueRouter也是不能使用的),为了好看我还使用了bootstrap。
安装
- CDN:
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
- npm方式:
$ npm install vue
npm install vue-router
$ npm install bootstrap@3
- 其实单独下载下来,再拷贝到项目里也是可以的(npm下载一堆乱七八糟的东西)
编码
- 这里不使用模块化机制编程,也就是使用Vue脚手架。
- 定义 (路由) 组件。
- 定义路由
- 创建 router 实例,然后传
routes
配置 - 创建和挂载根实例。(通过 router 配置参数注入路由,从而让整个应用都有路由功能)
<body>
<div id="app">
<!--导航栏-->
<div class="container-fluid col-md-8 col-md-offset-3" style="margin-bottom: 70px;margin-top: 18px">
<ul class="nav nav-pills ">
<!--这里使用三目运算符,给class动态绑定类名,从而达到给导航栏切换样式的效果-->
<li role="presentation" :class="showActive=='index'? 'active col-md-3':'col-md-3'" @click="changeActive('index')">
<!-- 使用 router-link 组件来导航. -->
<!-- 通过传入 `to` 属性指定链接. -->
<!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
<router-link to="/index">主页</router-link>
</li>
<li role="presentation" :class="showActive=='empList'? 'active col-md-3':'col-md-3'" @click="changeActive('empList')">
<router-link to="/emplist">员工管理</router-link>
</li>
<li role="presentation" :class="showActive=='setting'? 'active col-md-3':'col-md-3'" @click="changeActive('setting')">
<router-link to="/setting">系统设置</router-link>
</li>
</ul>
</div>
<!--内容-->
<div class="container-fluid col-md-6 col-md-offset-3">
<!-- 路由出口 -->
<!-- 路由匹配到的组件将渲染在这里 -->
<router-view></router-view>
</div>
</div>
<!--首页的组件-->
<template id="index">
<div>
<div class="jumbotron">
<h1>Hello, world!</h1>
<p>欢迎来到首页</p>
<p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
</div>
</div>
</template>
<!--员工管理页面-->
<template id="emplist">
<div>
<table class="table table-striped table-responsive table-bordered table-hover" style="text-align: center">
<tr>
<td>雇员编号</td>
<td>雇员姓名</td>
<td>雇员性别</td>
<td>雇员薪资</td>
<td>雇员电话</td>
<td>编辑</td>
</tr>
<tr>
<td>1001</td>
<td>张三</td>
<td>男</td>
<td>3300</td>
<td>18989878962</td>
<td>
<a class="button btn-sm">修改</a>
<a class="button btn-sm btn-danger">删除</a>
</td>
</tr>
<tr>
<td>1002</td>
<td>李四</td>
<td>男</td>
<td>3100</td>
<td>13498759876</td>
<td>
<a class="button btn-sm">修改</a>
<a class="button btn-sm btn-danger">删除</a>
</td>
</tr>
<td>1003</td>
<td>王芳</td>
<td>女</td>
<td>3400</td>
<td>17773687787</td>
<td>
<a class="button btn-sm">修改</a>
<a class="button btn-sm btn-danger">删除</a>
</td>
</table>
</div>
</template>
<!--系统设置页面-->
<template id="setting">
<div>
<h1 class="h1">系统设置</h1>
</div>
</template>
<script>
// 1. 定义 (路由) 组件。
/* 全局组件注册方式
Vue.component("index",{
template: "#index"
})*/
//以下是局部组件注册方式
let index = {
template : "#index"
}
let emplist ={
template: "#emplist"
}
let setting = {
template:"#setting"
}
// 2. 定义路由
let rules = [
{path:"/index",component:index},
{path:"/emplist",component:emplist},
{path:"/setting",component:setting}
] ;
// 3. 创建 router 实例,然后传 `routes` 配置
let router=new VueRouter({
routes:rules,
mode: 'history'//这个配置是将访问路径更美观
})
// 4. 创建和挂载根实例。
new Vue({
//控制区域
el:"#app",
//通过 router 配置参数注入路由,从而让整个应用都有路由功能
router,
data:{
showActive : "index"
},
methods:{
//通过导航栏点击事件,修改当前data中showActive的值为点击事件传来的值,从而达到修改导航栏样式
changeActive(value){
this.showActive = value;
}
},
components:{//组件挂载到这里
index,
emplist,
setting
}
})
</script>
</body>
效果图:
三、VueRouter传递参数
第一种方式(传统方式)
<router-link>
标签通过?拼接参数
<router-link to="/emplist?name=张三&id=1001">员工管理</router-link>
- 在对应组件中的created()方法中通过this.$route.query获取路由传递的参数
let emplist ={
template: "#emplist",
created(){
console.log(this.$route.query.name);
}
}
效果:
第二种方式(RestFul风格)
<router-link>
标签通过 / 拼接参数
<router-link to="/setting/张三/1001">系统设置</router-link>
- 在路由中进行参数绑定
let rules = [
{path:"/index",component:index},
{path:"/emplist",component:emplist},
{path:"/setting/:name/:id",component:setting}
] ;
- 在对应组件中的created()方法中通过
this.$route.params.name
获取参数。(注意,与上面的方式不同,这里$route
后面的是.params
)
let setting = {
template:"#setting",
created(){
console.log(this.$route.params.name);
}
}
效果图:
通过观察路径和输出可以发现,确实是使用RestFul风格完成了路由组件的传参
基于官方文档创作
官方链接:https://router.vuejs.org/zh/guide/#html
为了把视频转换为动态图,我专门下载了pr,完事还破解了,而下载破解安装包我还特意百度如何避免百度云限速,花了我不少时间......
不得不说B站是个好东西!这两样东西都是在B 站搞好的。下面是PS和PR百度云资源: