Vue之路由
Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。包含的功能有：
- 嵌套的路由/视图表
- 模块化的、基于组件的路由配置
- 路由参数、查询、通配符
- 基于 Vue.js 过渡系统的视图过渡效果
- 细粒度的导航控制
- 带有自动激活的 CSS class 的链接
- HTML5 历史模式或 hash 模式，在 IE9 中自动降级
- 自定义的滚动条行为
VueRouter的实现原理:
通过监听a标签的锚点值来动态显示页面
VueRouter的注意事项:
子路由的<router-link><router-link>写在父路由对应的组件的template里.
重定向路由可以使用反向解析
Vue Router的安装使用 :
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Title</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <script src="vue.min.js"></script> <script src="vue-router.js"></script> </head> <body> <div id="d1"></div> <script> //第一步在Vue示例中使用VueRouter Vue.use(VueRouter); let Home = { template: ` <div> <h1>主页</h1> </div> ` }; let Login = { template: ` <div><h1>登录</h1></div> ` }; let Register = { template: ` <div><h1>注册</h1></div> ` }; let App = { //第四步 //router-link会渲染成a标签, to属性相当于href属性, to后面是router中定义的路径 //router-view是页面内容渲染的出口, 路由匹配到的组件将渲染在这里 template: ` <div> <!--直接写路径版 <router-link to="/">首页</router-link> <router-link to="/login">登录</router-link> <router-link to="/register">注册</router-link>--> <!--命名路由版 <router-link :to="{name: 'home'}">首页</router-link> <router-link :to="{name: 'login'}">登录</router-link> <router-link :to="{name: 'register'}">注册</router-link> <router-view></router-view>--> <!--params是无参数名的传参关键字 query是有参数名的传参关键字 <router-link :to="{name: 'home'}">首页</router-link> <router-link :to="{name: 'login',params:{loginId: 1}}">登录</router-link> <router-link :to="{name: 'register',query:{reg: 1}}">注册</router-link> <router-view></router-view>--> </div> `, }; //第二部实例化一个router对象 //本质上是将路径和页面内容绑定一个对应的关系 // 在真实的场景中，可有以下路径形式 // user/1; // user/?userId=1; let router = new VueRouter({ mode: "history", routes: [ { name: "home", path: "/", component: Home, }, { //xxx/参数 name: "login", path: "/login/:loginId", component: Login }, { //xxx/?参数名=参数值 name: "register", path: "/register", component: Register } ] }); new Vue({ el: "#d1", template: `<App/>`, //第三部在根实例对象中注册router对象 router: router, components: { App, } }) </script> </body> </html>
Vue Router子路由 :
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Title</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <script src="vue.min.js"></script> <script src="vue-router.js"></script> </head> <body> <div id="d1"></div> <script> Vue.use(VueRouter); let Home = { template: `<div><h1>这是主页</h1></div>` }; let Course = { template: ` <div> <h2>课程页面</h2> <router-link :to="{name: 'python'}" append>派森</router-link> <router-link :to="{name: 'linux'}">linux</router-link> <router-view></router-view> </div>`, }; let Python = { template: `<div><h3>人生苦短,我用派森</h3></div>` }; let Linux = { template: `<div><h3>不会linux岂不是咸鱼</h3></div>` }; let Class = { template: ` <div> <h1>班级页面</h1> <router-link :to="{name: 'one'}">一班</router-link> <router-link :to="{name: 'two'}">二班</router-link> <router-view></router-view> </div>` }; let One = { template: ` <div> <router-link :to="{name: 'red'}">一班啊</router-link> </div>` }; let Two = { template: `<div><h3>二班啊</h3></div>` }; //实例化一个router对象 //把a标签的锚点值和页面的内容绑定对应关系. let router = new VueRouter({ //将url简化(去掉" # ") mode: 'history',
routes: [ { name: "home", path: "/", component: Home }, { name: "course", path: "/course", component: Course, children: [ { name: "python", path: "python", component: Python }, { //使用append自动添加前路径的话.子路径名前不能有" / " name: "linux", path: "linux", component: Linux }, { name: "red", path: "red", //重定向页面 redirect: "/", } ] }, { name: "class", path: "/class", component: Class, children: [ { name: "one", path: "/class/one", component: One }, { name: "two", path: "/class/two", component: Two } ] }, ] }); let App = { template:` <div> <router-link :to="{name: 'home'}">首页</router-link> <router-link :to="{name: 'course'}">课程</router-link> <router-link :to="{name: 'class'}">班级</router-link> <router-view></router-view> </div> `, }; new Vue({ el: "#d1", template:`<App/>`, components:{ App, }, //在根实例中注册router对象 router: router }) </script> </body> </html>
去掉#之前的url
去掉#之后的url
Vue路由之钩子函数:
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Title</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <script src="vue.min.js"></script> <script src="vue-router.js"></script> </head> <body> <div id="d1"></div> <script> Vue.use(VueRouter); let Home = { template: `<div><h1>这是主页</h1></div>` }; let Course = { template: ` <div> <h2>课程页面</h2> <router-link :to="{name: 'python'}" append>派森</router-link> <router-link :to="{name: 'linux'}">linux</router-link> <router-view></router-view> </div>`, }; let Python = { template: `<div><h3>人生苦短,我用派森</h3></div>` }; let Linux = { template: `<div><h3>不会linux岂不是咸鱼</h3></div>` }; let Class = { template: ` <div> <h1>班级页面</h1> <router-link :to="{name: 'one'}">一班</router-link> <router-link :to="{name: 'two'}">二班</router-link> <router-view></router-view> </div>` }; let One = { template: ` <div> <router-link :to="{name: 'red'}">一班啊</router-link> </div>` }; let Two = { template: `<div><h3>二班啊</h3></div>` }; let router = new VueRouter({ routes: [ { name: "home", path: "/", component: Home }, { name: "course", path: "/course", //在需要跳转的页面内添加一个required_login数据 meta: {required_login: true}, component: Course, children: [ { name: "python", path: "python", component: Python }, { //使用append自动添加前路径的话.子路径名前不能有" / " name: "linux", path: "linux", component: Linux }, { name: "red", path: "red", //重定向页面 redirect: "/", } ] }, { name: "class", path: "/class", component: Class, children: [ { name: "one", path: "/class/one", component: One }, { name: "two", path: "/class/two", component: Two } ] }, ] }); let App = { template: ` <div> <router-link :to="{name: 'home'}">首页</router-link> <router-link :to="{name: 'course'}">课程</router-link> <router-link :to="{name: 'class'}">班级</router-link> <router-view></router-view> </div> `, }; router.beforeEach(function (to, from, next) { console.log("to", to); //从哪个页面来 console.log("from", from); //向哪个页面去 console.log("next", next); //针对一些简单逻辑进行的自定义设置跳转页面 //对required_login的值进行判断. if (to.meta.required_login) { //自定义跳转的页面 next("/home") } else { //正常执行 next() } }); new Vue({ el: "#d1", template: `<App/>`, components: { App, }, router: router }) </script> </body> </html>
