这篇文章继承上一篇继续学习 Vue 的路由。
参考： Vue Router 官方文档 https://router.vuejs.org/zh/guide/
上一篇文章的链接：Vue 学习(三)——组件 http://www.honeybee.top/articles/2018/10/09/1539073039977.html
1. 什么是路由
路由可以被区分为前端路由和后端路由，这两者之间的区别：
后端路由：以前都是用超链接作为 URL 地址，所有的 URL 地址也相对应服务器上的资源。
前端路由：不同于后端路由，对于单页面的应用程序来说，主要通过 URL 中的 hash(#号)来实现不同页面之间的切换，而且 hash 有一个特点：http 请求中不会包含 hash 相关的内容，所以单页面程序中的跳转主要用 hash 实现。
2. 安装
~NPM
npm install vue-router
如果在模块化工程中使用路由，必须要通过 Vue.use() 明确安装路由功能：
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
注：如果使用全局的 script 标签，则无须如此 (手动安装)。因为是学习单个功能的原因，所以没有创建模块化工程，下面例子都是直接用 html 页面引入 js 来完成的。
3. 路由的基本使用
<html>
<head>
<meta charset="utf-8" />
<script src="https://cdn.bootcss.com/vue/2.5.16/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
</head>
<body>
<div id="app">
<!-- 这个写法也可以，但一般使用下面的官方写法-->
<!--<a href="#/login">登录</a>--》
<!--<a href="#/register">注册</a>-->
<!-- 说到底其实router-link 默认渲染的是一个 a 标签 -->
<router-link to="/login">登录</router-link>
<router-link to="/register">注册</router-link>
<!-- 这是vue-router中的元素，用来当作占位符，路由规则匹配到的组件则会展示到这个元素中去 -->
<router-view></router-view>
</div>
<script>
//2.创建一个登录组件模板对象
var login = {
template: '<h2>登录组件</h2>'
};
//3.创建一个注册组件模板对象
var register = {
template: '<h2>注册组件</h2>'
};
//1.通过VueRouter构造函数创建一个路由对象
var routerObj = new VueRouter({
//为构造函数传递一个配置对象routes,可以放置路由匹配规则
routes: [
//每个路由匹配规则都是一个对象，这个必须有两个属性：
//属性1：path, 表示监听路由的链接地址;
//属性2： component, 表示匹配到path的地址后,则展示component属性对应的组件
//注意: component 的属性值应该是组件的 模板对象 ， 而不是组件的名称
{path: '/login', component: login},
{path: '/register', component: register}
]
});
var vm = new Vue({
el: '#app',
data: {},
methods: {},
//4.将路由规则对象，注册到VM实例上，监听URL地址的变化来展示对应的组件
router: routerObj
});
</script>
</body>
</html>
~路由对应的运行结果(注意地址栏的变化)：
登录组件：
注册组件：
另外需要说明的是：在引入 vue-router.js 后地址栏会自动带上 #/ ，代表 hash 路由。
4. 重定向
将上面的例子修改下：让页面默认跳转到 /login 路由上，在上面例子的基础上修改
//1.通过VueRouter构造函数创建一个路由对象
var routerObj = new VueRouter({
//为构造函数传递一个配置对象routes,可以放置路由匹配规则
routes: [
//每个路由匹配规则都是一个对象，这个必须有两个属性：
//属性1：path, 表示监听路由的链接地址;
//属性2： component, 表示匹配到path的地址后,则展示component属性对应的组件
//注意: component 的属性值应该是组件的 模板对象 ， 而不是组件的名称
{path: '/', redirect: '/login'}, //新增加的行
{path: '/login', component: login},
{path: '/register', component: register}
]
});
5. 路由传参方式
1) 传参方式 1：使用 query 方式传递参数
对 路由的基本使用 的例子再做改动：
<html>
<head>
<meta charset="utf-8" />
<script src="https://cdn.bootcss.com/vue/2.5.16/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
</head>
<body>
<div id="app">
<!--改动1：-->
<router-link to="/login?id=1&account=admin">登录</router-link>
<router-link to="/register">注册</router-link>
<router-view></router-view>
</div>
<script>
//改动2：这里通过$route.query来获取参数
var login = {
template: '<h2>登录组件 --- {{this.$route.query.id}} --- {{$route.query.account}}</h2>'
};
var register = {
template: '<h2>注册组件</h2>'
};
var routerObj = new VueRouter({
routes: [
{path: '/login', component: login},
{path: '/register', component: register}
]
});
var vm = new Vue({
el: '#app',
data: {},
methods: {},
router: routerObj
});
</script>
</body>
</html>
login 路由的页面结果如下：
2)传参方式 2：使用 params 方式传递参数
对 路由的基本使用 的例子做改动：
<html>
<head>
<meta charset="utf-8" />
<script src="https://cdn.bootcss.com/vue/2.5.16/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
</head>
<body>
<div id="app">
<!--改动3：-->
<router-link to="/login/1/admin">登录</router-link>
<router-link to="/register">注册</router-link>
<router-view></router-view>
</div>
<script>
//改动2：
var login = {
template: '<h2>登录组件 --- {{this.$route.params.id}} --- {{$route.params.account}}</h2>'
};
var register = {
template: '<h2>注册组件</h2>'
};
var routerObj = new VueRouter({
routes: [
//改动1：
{path: '/login/:id/:account', component: login},
{path: '/register', component: register}
]
});
var vm = new Vue({
el: '#app',
data: {},
methods: {},
router: routerObj
});
</script>
</body>
</html>
login 路由的页面结果如下：
6. 路由嵌套
<html>
<head>
<meta charset="utf-8" />
<script src="https://cdn.bootcss.com/vue/2.5.16/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
</head>
<body>
<div id="app">
<router-link to="/account">Account</router-link>
<router-view></router-view>
</div>
<template id="account">
<div>
<h1>Account组件</h1>
<router-link to="/account/login">登录</router-link>
<router-link to="/account/register">注册</router-link>
<!-- 在account组件下面再挂载一个router-view来显示子路由-->
<router-view></router-view>
</div>
</template>
<script>
var account = {
template: '#account'
}
var login = {
template: '<h2>登录组件</h2>'
}
var register = {
template: '<h2>注册组件</h2>'
}
var routerObj = new VueRouter({
routes: [
{
path: '/account',
component: account,
//使用children属性实现子路由
//注意：子路由path路径不需要带'/', 否则会以根路径来请求
children: [
{path: 'login', component: login},
{path: 'register', component: register}
]
}
]
});
var vm = new Vue({
el: '#app',
data: {},
methods: {},
router: routerObj
});
</script>
</body>
</html>
运行结果如下:
7. 路由的命名视图
<html>
<head>
<meta charset="utf-8" />
<script src="https://cdn.bootcss.com/vue/2.5.16/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<style>
html,body {
margin: 0;
padding: 0;
}
.headerq {
background-color: deepskyblue;
height: 80px;
}
.container {
display: flex;
height: 400px;
}
h1 {
margin: 0;
padding: 0;
font-size: 20px;
}
.left {
background: lightgray;
flex: 2;
}
.main {
background: lightpink;
flex: 8;
}
</style>
</head>
<body>
<div id="app">
<router-view></router-view>
<div class="container">
<!-- 根据name属性值来显示不同的组件-->
<router-view name='left'></router-view>
<router-view name='main'></router-view>
</div>
</div>
<script>
var header = {
template: '<h1 class="headerq">Header头部区域</h1>'
}
var leftBox = {
template: '<h1 class="left">left侧边栏区域</h1>'
}
var mainBox = {
template: '<h1 class="main">main区域</h1>'
}
//创建路由对象
var routerObj = new VueRouter({
routes: [
{
path: '/',
//components属性可以挂载多个组件，并且命名，默认为default
components: {
'default': header,
'left': leftBox,
'main': mainBox
}
},
]
})
var vm = new Vue({
el: '#app',
data: {},
methods: {},
router: routerObj
});
</script>
</body>
</html>
运行结果如下：
欢迎来到这里！
我们正在构建一个小众社区，大家在这里相互信任，以平等 • 自由 • 奔放的价值观进行分享交流。最终，希望大家能够找到与自己志同道合的伙伴，共同成长。
注册 关于