路由的安装使用
npm install vue-router
// router.js
import Vue from "vue";
import VueRouter from "vue-router";
import Home from "../components/Home";
Vue.use(VueRouter);
export default new VueRouter({
routes: [
{
path: "/",
component: Home,
},
],
});
// main.js
import router from "./router";
new Vue({
router, // 这里是es6的写法，所以这个名字必须是router，改成别名不会被识别，注意。
store,
render: (h) => h(App),
}).$mount("#app");
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
功能说明
- 嵌套的路由/视图表
- 模块化的、基于组件的路由配置
- 路由参数、查询、通配符
- 基于 Vue.js 过渡系统的视图过渡效果
- 细粒度的导航控制
- 带有自动激活的 CSS class 的链接
- HTML5 历史模式或 hash 模式，在 IE9 中自动降级
- 自定义的滚动条行为
常用配置
export default new VueRouter({
// 【mode】"hash" | "history" | "abstract"是nodejs环境
mode: "history", // 默认hash模式
// 基路径,比如上线后需要跟在二级目录下，你会懂的，痛过才会懂
base: "/songyu",
routes: [
{
path: "/",
redirect: "/home", // 重定向
},
{
path: "/home",
component: Home,
alias: "/404", // 别名，即地址里显示404，页面显示首页
},
],
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
路由好像没什么可记录的，都在官方文档里写的很清楚，以后有闲工夫再赘述吧，哦，还有 vuex 也是，不怪我，谁让官方写的那么详细。
这里简单说一下路由在开发中常用的吧：
- 跳转：js 跳转，标签跳转
- 传参：多种带参数过去，但是有坑，比如刷新页面值会丢失，需要想好用哪个
- 拦截：做权限鉴权用的
- 重定向：容错页设置
- 模式：如果是 has 模式没什么，除了限制一点功能外，兼容还好，如果是 history 就要考虑上线后的二级域名
- 好吧，我会在今年把这个路由和 vuex 写一下总结