Vue Router 路由
路由介绍
vue-router是Vue的路由系统，定位资源的，我们可以不进行整页刷新去切换页面内容。
官网详情介绍：https://router.vuejs.org/zh/
路由的注册
- 使用router，需要导入模块：
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
- 注册路由： 在对象中添加 router 参数，即可将定义的 路由加入：
const app = new Vue({
el: "#app",
router: my_router,
})
// my_router 就是自定义的路由，为了代码的整洁，将它单独解耦了出来；
- 定义路由： 自定义的路由是一个 VueRouter({}) 对象； 对象中routes参数来记录自定义的实际路由信息；
let my_router = new VueRouter({
routes: url
});
// 联合上文看， 上文中的 my_router;
// 注意，routes 不可更改；
// url 是定义的路由的具体信息，可见下文；
- 定义路由中的每个不同的路由信息：
路由信息实际上是一个数组；
数组中包含的是每一个不同的url对象；
url对象中包含的参数有：path， name， component
let url = [ { path: "/", // 路径名字 name: "home", // 反向解析 component: { // 组件 template: `<div> <h1>这是首页</h1> <h2>首页内容</h2> </div> ` } }, { path: "/index", // 路径名字 name: "index", // 反向解析 component: { // 组件 template: `<div> <h1>这是登录</h1> <h2>登录内容</h2> </div> ` } }, ];
- 增加子路由：
url对象中还有一个参数叫做children，该参数就是用来注册子路由;
子路由 对应的也是一个数组，数组中包含这所有的子路由对象；
// 补充：redirect 参数，当访问该页面，自动跳转
let url = [ { path: "/", // 路径名字 name: "home", // 反向解析
redirect: "/details" // 默认跳转子路由的页面 component: { // 组件 template: `<div> <h1>这是首页</h1> <h2>首页内容</h2> <div> <router-link to="/details">详情</router-link> <router-view></router-view> </div> </div> ` }, children: [ { path: "/details", name: "details", component: { template: ` <div><h1>这是详情页面</h1></div> ` } }, ] }]
- 在页面中使用自定义的路由：
<router-view></router-view>
- 在页面中显示锚点按钮：
// 直接跳转：
<router-link to="/">首页</router-link>
// 通过反向解析获取url
<router-link :to="{name: 'home'}">首页</router-link> <router-link :to="{name: 'login'}">登录</router-link>
- 路由完整示例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Title</title> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script> <!--注册路由需要导入该模块--> <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script> <body> <div id="app"> <router-link :to="{name: 'home'}">首页</router-link> <router-link :to="{name: 'login'}">登录</router-link> <router-view></router-view> </div> <script> // 路由信息实际上是一个数组； // 数组中包含的是每一个不同的url对象； // url对象中包含的参数有：path， name， component // url对象中还有一个参数叫做children，该参数就是用来注册 子路由， // 子路由 对应的也是一个数组，数组中包含这所有的子路由对象； let url = [ { path: "/", // 路径名字 name: "home", // 反向解析 component: { // 组件 template: `<div> <h1>这是首页</h1> <h2>首页内容</h2> <div> <router-link to="/details">详情</router-link> <router-view></router-view> </div> </div> ` }, children: [ { path: "/details", name: "details", component: { template: ` <div><h1>这是详情页面</h1></div> ` } }, ] }, { path: "/login", name: "login", component: { template: `<div><h1>这是登录页面</h1></div>` } }, ]; // 自定义的路由是一个 VueRouter({}) 对象； // 对象中routes参数来记录自定义的实际路由信息； let my_router = new VueRouter({ routes: url }); // 在对象中添加 router 参数，即可将定义的 路由加入 const app = new Vue({ el: "#app", router: my_router, }) </script> </body> </html>
路由的钩子
- 手动跳转路由：
在路由的template中添加一个点击事件，点击后跳转首页；
实现a标签的跳转功能，在绑定的事件函数中，使用 this.$router.push()
该方法里面传入一个对象对象包括的参数：name，params，query...
{ path: "/login", name: "login", component: { template: `<div> <h1>这是登录页面</h1> <button @click="my_click">点我跳转到用户页面</button> </div>`, methods: { my_click: function () { // 跳转到用户页面 this.$router.push({name: "user", params: {username: "caizhuang"}, query: {age: 48}}) } } }, { path: "/user/:username", name: "user", component: { template: "#my_user", methods: { my_click: function () { // 跳转到首页 console.log("ROUTER:", this.$router); this.$router.push({name: "home"}) } } }
- router.beforeEach(function (to, from, next) {})
- 在跳转也面前，执行该函数；
- 需要经过钩子函数验证的路由，则在定义路由的对象中添加参数 meta
{ path: "/", name: "home", redirect: "/liuye", meta: { required_login: true }, component: { template: `<div> <h1>这是首页</h1> <router-link to="/liuye">也哥</router-link> <router-link to="/fengkun">小弟</router-link> <router-view></router-view> </div>` }, children: [ { path: "/liuye", meta: { required_login: true }, component: { template: `<div><h1>这是也哥地盘</h1></div>` } }, { path: "/fengkun", component: { template: `<div><h1>这是也哥小弟的地盘</h1></div>` } } ] },
- 定义 router.beforeEach(function (to, from, next) {}) 函数：
// next() 中什么都不传，表示，正常继续访问；
// 若有问题，传入一个路由路径，让其返回该路由的页面；
router.beforeEach(function (to, from, next) {
if(to.path == "/user/caizhuang"){
next("/login")
}else {
next()
}
});
// to: 将要去的那个路由的 路由对象；
// from: 从哪个路由对象跳转过来的 那个路由对象；
// next: 没有参数，则继续执行； 否则跳转到某个指定路由
// 类同装饰器
- router.afterEach(function (to, from, next) {})
- 跳转结束后，执行该函数；
