项目前导 学习笔记
一、路由基本
在网页中，经常需要发生页面更新或者跳转。这时候我们就可以使用 Vue-Router 来帮我们实现。Vue-Router 是用来做路由的，也就是定义 url 规则与具体的 View 映射的关系。可以在一个单页面中实现数据的更新。
1.1、安装
-
使用CDN：
-
加载最新版的：
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script> -
加载指定版本的：
<script src="https://unpkg.com/[email protected]/dist/vue-router.js"></script>
-
-
下载到本地：
<script src="../../lib/vue-router.js"></script>
-
使用npm安装：npm install vue-router。
1.2、基本使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>静态路由</title>
</head>
<body>
<div id="app">
<router-link to="/">首页</router-link>
<router-link to="/music">音乐</router-link>
<!-- 路由匹配到的组件将渲染到这里 -->
<router-view></router-view>
</div>
</body>
</html>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<script>
// component 与 extend 创建组件的区别
// 前者需给定组件名字, 后者不需要给定组件名字
var idx = Vue.extend({ template:"<h1>这是首页</h1>" })
var music = Vue.extend({ template:"<h1>这是音乐目录</h1>" })
var rou = new VueRouter({
// routes 是规则
routes: [
// path 为路径, 即在页面 url 后面添加的字符串
// path 的值可以改为其他, 相对的上面 html 也要改
// component 为模板
{path: "/", component: idx},
{path: "/music", component: music}
]
})
new Vue({
el: "#app",
data: {},
// 要先在这里定义
router: rou
});
</script>
解释：
-
在
vue-router中，使用<router-link>来加载链接，然后使用to表示跳转的链接。vue-router最终会把<router-link>渲染成<a>标签。 -
<router-view>是路由的出口，也就是相应 url 下的代码会被渲染到这个地方来。 -
Vue.extend是用来加载模板的。 -
routes是定义一个 url 与组件的映射，这个就是路由。 -
VueRouter创建一个路由对象。
二、动态路由
在路由中有一些参数是会变化的，比如查看某个用户的个人中心，那肯定需要在 url 中加载这个人的 id，这时候就需要用到动态路由了。
<div id="app">
<router-link to="/user/123">个人中心</router-link>
<router-link to="/user/666">个人中心</router-link>
<router-view></router-view>
</div>
<script>
// $route.params.userid 可以打印其 id
// let 和 var 都是定义变量, const 是定义常量
let UserProfile = {template:"<h1>个人中心：{{$route.params.userid}}</h1>"}
var router = new VueRouter({
routes: [
{path: "/user/:userid",component: UserProfile}
]
});
new Vue({
el: "#app",
router: router
})
</script>
解释：
-
:userid：动态的参数。 -
this.$route.params：这个里面记录了路由中的参数。
三、组件复用（了解）
当使用路由参数时，例如从 /user/foo 导航到 /user/bar，原来的组件实例会被复用。因为两个路由都渲染同个组件，比起销毁再创建，复用则显得更加高效。不过，这也意味着组件的生命周期钩子不会再被调用。
- 复用组件时，想对路由参数的变化作出响应的话，你可以简单地
watch(监测变化)``$route对象：
const User = {
template: '...',
watch: {
'$route' (to, from) {
// 对路由变化作出响应...
}
}
}
- 或者是使用后面跟大家讲到的导航守卫：
const User = {
template: '...',
beforeRouteUpdate (to, from, next) {
// react to route changes...
// don't forget to call next()
}
}
}
