Vue之VueRouter
Vue之VueRouter实现原理
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <title>Title</title> </head> <body> <div id="app"> </div> <script> let oDiv = document.getElementById('app'); window.onhashchange = function () { # onhashchange事件,只需要修改hash值即可响应onhashchange事件中的函数(适用于上一题下一题和跳转页面等功能) switch (location.hash) { case '#/login': oDiv.innerHTML = `<h1>这是登录页面</h1>`; break; case '#/register': oDiv.innerHTML = `<h1>这是注册页面</h1>`; break; default: oDiv.innerHTML = `<h1>这是首页</h1>`; break; } } </script> </body> </html>
Vue之VueRouter安装使用
<!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="static/vue.min.js"></script> <script src="static/vue-router.js"></script> </head> <body> <div id="app"> </div> <script> // 1.在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 = { // 4.第四步,router-link会渲染成a标签,to会变成href属性,to后面是router中定义的路径 // 5.第五步,router-view是页面内容的渲染出口 template: ` <div> <router-link to="/">首页</router-link> <router-link to="/login">登录</router-link> <router-link to="/register">注册</router-link> <router-view></router-view> </div> `, }; // 2.第二步实例化一个VueRouter对象 // 本质上是将路径和页面内容绑定了对应关系 let router = new VueRouter({ routes: [ { path: '/', // 注册Home component: Home, }, { path: '/login', component: Login, }, { path: '/register', component: Register, }, ], }); new Vue({ el: '#app', template: `<App/>`, // 3.第三步,在根实例中注册router对象 router: router, components: { App, } }); </script> </body> </html>
Vue之VueRouter命名路由
let App = { // 第四步,router-link会渲染成a标签,to会变成href属性,to后面是router中定义的路径 // 第五步,router-link是页面内容的渲染出口 template: ` // 注意这里需要绑定 <div> <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> </div> `, }; let router = new VueRouter({ routes: [ { name: 'home', // 新增的 path: '/', component: Home, }, { name: 'login', path: '/login', component: Login, }, { name: 'register', path: '/register', component: Register, }, ] }); // 其他的和上一个安装使用一样
Vue之VueRouter路由参数
<!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="static/vue.min.js"></script> <script src="static/vue-router.js"></script> </head> <body> <div id="app"> </div> <script> // 在真实的场景中,可有以下路径形式 // user/1; // user/userId: 1; // 1.在Vue根实例中使用,VueRouter Vue.use(VueRouter); let Home = { template: ` <div> <h1>这是主页页面</h1> </div> `, }; let userParams = { template: ` <div> <h1>这是用户一的信息</h1> </div> `, }; let userQuery = { template: ` <div> <h1>这是用户二的信息</h1> </div> `, }; let App = { // 第四步,router-link会渲染成a标签,to会变成href属性,to后面是router中定义的路径 // 第五步,router-link是页面内容的渲染出口 template: ` // 注意这里需要绑定 <div> <router-link :to="{ name: 'home' }">首页</router-link> <router-link :to="{ name: 'userParams', params: { userId: 1 } }">登录</router-link> <router-link :to="{ name: 'userQuery', query: { userId: 2 } }">注册</router-link> <router-view></router-view> </div> `, }; let router = new VueRouter({ routes: [ { name: 'home', path: '/', component: Home, }, { // xxx/1 这是路径显示 name: 'userParams', path: '/user/:userId', component: userParams, }, { // xxx/?userId=1 这是路径显示 name: 'userQuery', path: '/user', component: userQuery, }, ] }); new Vue({ el: '#app', // 第三步,在根实例中注册router对象, template: `<App/>`, router: router, components: { App, } }) </script> </body> </html>
Vue之VueRouter子路由
<!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="static/vue.min.js"></script> <script src="static/vue-router.js"></script> </head> <body> <div id="app"> </div> <script> // 在真实的场景中,可有以下路径形式 // user/1; // user/userId: 1; // 1.在Vue根实例中使用,VueRouter Vue.use(VueRouter); let Home = { template: ` <div> <h1>这是主页页面</h1> </div> `, }; let Courses = { template: ` <div> <h1>这是课程页面</h1> <router-link to="lightcourses">轻课</router-link> <router-link to="degreecourses">学位课</router-link> <router-view></router-view> </div> `, }; let LightCourses = { template: ` <div> <h1>这是轻课页面</h1> </div> `, }; let DegreeCourses = { template: ` <div> <h1>这是学位课程页面</h1> </div> `, }; let App = { // 第四步,router-link会渲染成a标签,to会变成href属性,to后面是router中定义的路径 // 第五步,router-link是页面内容的渲染出口 template: ` // 注意这里需要绑定 <div> <router-link :to="{ name: 'home' }">首页</router-link> <router-link :to="{ name: 'courses' }">课程页面</router-link> <router-view></router-view> </div> `, }; let router = new VueRouter({ routes: [ { name: 'home', path: '/', component: Home, }, { // xxx/1 这是路径显示 name: 'courses', path: '/courses', component: Courses, children: [ { path: 'lightcourses', component: LightCourses, }, { path: 'degreecourses', component: DegreeCourses, } ] }, ] }); new Vue({ el: '#app', // 第三步,在根实例中注册router对象, template: `<App/>`, router: router, components: { App, } }) </script> </body> </html>
Vue之VueRouter子路由append版
<router-link to="lightcourses" append >轻课</router-link> // 加append
Vue之VueRouter子路由append升级版
<!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="static/vue.min.js"></script> <script src="static/vue-router.js"></script> </head> <body> <div id="app"> </div> <script> // 在真实的场景中,可有以下路径形式 // user/1; // user/userId: 1; // 1.在Vue根实例中使用,VueRouter Vue.use(VueRouter); let Home = { template: ` <div> <h1>这是主页页面</h1> </div> `, }; let Courses = { template: ` <div> <h1>这是课程页面</h1> <router-link :to="{ name: 'lightcourses' }">轻课</router-link> <router-link :to="{ name: 'degreecourses' }">学位课</router-link> <router-view></router-view> </div> `, }; let LightCourses = { template: ` <div> <h1>这是轻课页面</h1> </div> `, }; let DegreeCourses = { template: ` <div> <h1>这是学位课程页面</h1> </div> `, }; let App = { // 第四步,router-link会渲染成a标签,to会变成href属性,to后面是router中定义的路径 // 第五步,router-link是页面内容的渲染出口 template: ` // 注意这里需要绑定 <div> <router-link :to="{ name: 'home' }">首页</router-link> <router-link :to="{ name: 'courses' }">课程页面</router-link> <router-view></router-view> </div> `, }; let router = new VueRouter({ routes: [ { name: 'home', path: '/', component: Home, }, { // xxx/1 这是路径显示 name: 'courses', path: '/courses', component: Courses, children: [ { name: 'lightcourses', path: 'lightcourses', component: LightCourses, }, { name: 'degreecourses', path: 'degreecourses', component: DegreeCourses, } ] }, ] }); new Vue({ el: '#app', // 第三步,在根实例中注册router对象, template: `<App/>`, router: router, components: { App, } }) </script> </body> </html>
Vue之VueRouter子路由重定向
<!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="static/vue.min.js"></script> <script src="static/vue-router.js"></script> </head> <body> <div id="app"> </div> <script> // 在真实的场景中,可有以下路径形式 // user/1; // user/userId: 1; // 1.在Vue根实例中使用,VueRouter Vue.use(VueRouter); let Home = { template: ` <div> <h1>这是主页页面</h1> </div> `, }; let Login = { template: ` <div> <h1>这是登录页面</h1> </div> `, }; let Pay = { template: ` <div> <h1>这是支付页面</h1> </div> `, }; let App = { // 第四步,router-link会渲染成a标签,to会变成href属性,to后面是router中定义的路径 // 第五步,router-link是页面内容的渲染出口 template: ` // 注意这里需要绑定 <div> <router-link :to="{ name: 'home' }">首页</router-link> <router-link :to="{ name: 'login' }">登录</router-link> <router-link :to="{ name: 'pay' }">支付</router-link> <router-view></router-view> </div> `, }; let router = new VueRouter({ routes: [ { name: 'home', path: '/', component: Home, }, { // xxx/1 这是路径显示 name: 'login', path: '/login', component: Login, }, { // xxx/1 这是路径显示 name: 'pay', path: '/pay', redirect: '/login', // 重定向点击支付还是跳转登录页面 component: Pay, }, ] }); new Vue({ el: '#app', // 第三步,在根实例中注册router对象, template: `<App/>`, router: router, components: { App, } }) </script> </body> </html>
Vue之VueRouter子路由的钩子函数
<!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="static/vue.min.js"></script> <script src="static/vue-router.js"></script> </head> <body> <div id="app"> </div> <script> // 在真实的场景中,可有以下路径形式 // user/1; // user/userId: 1; // 1.在Vue根实例中使用,VueRouter Vue.use(VueRouter); let Home = { template: ` <div> <h1>这是主页页面</h1> </div> `, }; let Login = { template: ` <div> <h1>这是登录页面</h1> </div> `, }; let Pay = { template: ` <div> <h1>这是支付页面</h1> </div> `, }; let App = { // 第四步,router-link会渲染成a标签,to会变成href属性,to后面是router中定义的路径 // 第五步,router-link是页面内容的渲染出口 template: ` // 注意这里需要绑定 <div> <router-link :to="{ name: 'home' }">首页</router-link> <router-link :to="{ name: 'login' }">登录</router-link> <router-link :to="{ name: 'pay' }">支付</router-link> <router-view></router-view> </div> `, }; let router = new VueRouter({ routes: [ { name: 'home', path: '/', component: Home, }, { // xxx/1 这是路径显示 name: 'login', path: '/login', component: Login, }, { // xxx/1 这是路径显示 name: 'pay', path: '/pay', meta: { required_login: true }, component: Pay, }, ] }); // 通过router对象的beforeEach(function(to,from,next)) router .beforeEach(function (to, from, next) { if (to.meta.required_login){ next('/login'); }else{ next(); } }); new Vue({ el: '#app', // 第三步,在根实例中注册router对象, template: `<App/>`, router: router, components: { App, } }) </script> </body> </html>
Vue之VueRouter子路由去掉井号
let router = new VueRouter({ mode: 'history', // 新加的去掉井号的内容 routes: [ { name: 'home', path: '/', component: Home, }, { // xxx/1 这是路径显示 name: 'login', path: '/login', component: Login, }, { // xxx/1 这是路径显示 name: 'pay', path: '/pay', meta: { required_login: true }, component: Pay, }, ] });
$route和$router的区别
$route 表示(当前路由信息对象)
**1.$route.path** 字符串,对应当前路由的路径,总是解析为绝对路径,如 "/foo/bar"。 **2.$route.params** 一个 key/value 对象,包含了 动态片段 和 全匹配片段, 如果没有路由参数,就是一个空对象。 **3.$route.query** 一个 key/value 对象,表示 URL 查询参数。 例如,对于路径 /foo?user=1,则有 $route.query.user == 1, 如果没有查询参数,则是个空对象。 **4.$route.hash** 当前路由的 hash 值 (不带 #) ,如果没有 hash 值,则为空字符串。锚点 **5.$route.fullPath** 完成解析后的 URL,包含查询参数和 hash 的完整路径。 **6.$route.matched** 数组,包含当前匹配的路径中所包含的所有片段所对应的配置参数对象。 **7.$route.name 当前路径名字** **8.$route.meta 路由元信息
$router全局的路由实例,是router构造方法的实例
// 字符串 this.$router.push('home') // 对象 this.$router.push({ path: 'home' }) // 命名的路由 this.$router.push({ name: 'user', params: { userId: 123 }}) // 带查询参数,变成 /register?plan=123 this.$router.push({ path: 'register', query: { plan: '123' }}) // 页面路由跳转 前进或者后退 this.$router.go(-1) // 后退 //push方法会向 history 栈添加一个新的记录,而replace方法是替换当前的页面, 不会向 history 栈添加一个新的记录 <router-link to="/05" replace>05</router-link> // 一般使用replace来做404页面 this.$router.replace('/')
push方法其实和<router-link :to="...">是等同的。
注意:push方法的跳转会向 history 栈添加一个新的记录,当我们点击浏览器的返回按钮时可以看到之前的页面。