vue.js学习（四）
Vue Router（路由）构建单页程序
①路由是Vue.js的核心组件，通过路由器可以构建用户体验较高的单页应用程序。
②使用VueRouter构建一个单页应用程序
在heml中要引入脚本Vue.js和VueRouter.js文件，定义导航组件<router-link>,渲染与路由匹配的组件内容<router-view>
在js中步骤是定义组件信息，使用数字定义路由列表、实例化路由、实例Vue对象。实例化路由是挂载在Vue对象上的。
<body>
<div id="app">
<h1>路由的定义</h1>
<div>
<router-link to="/stu">学生</router-link>
<router-link to="/tea">老师</router-link>
</div>
<div>
<router-view></router-view>
</div>
</div>
</body>
<script>
//创建学生组件
var stu={
template:`<div>学生界面</div>`
}
//创建老师组件
var tea={
template:`<div>这是一个老师界面</div>`
}
//创建路由对象
var routers=[{path:"/stu",component:stu},{path:"/tea",component:tea}]
//实例路由器
var router=new VueRouter({routes:routers});
var vm=new Vue({
el:"#app",
router:router,
})
</script>
③动态路由
可以动态改变路由信息，在组件上需要从外面传递参数来做相应的处理时，参数信息可以通过动态路由来传递。
<body>
<div id="app">
<h3>动态路由</h3>
<div>
<router-link to="/user/stu/100">学生</router-link>
<router-link to="/user/tea/10">老师</router-link>
</div>
<div>
<router-view></router-view>
</div>
</div>
<script>
//创建组件
var user={
template:`<div>我是一个{{$route.params["name"]=="stu"?"学生":"老师"}} id={{id}}</div>`,
props:["id"]
}
//定义路由
var routes=[{path:"/user/:name/:id",component:user,props:true}]
//实例路由
var router=new VueRouter({routes})
var vn=new Vue({
el:"#app",
router,
})
</script>
path路径在"/user/:name"在路由上使用冒号（:）标记一个路由参数，可以理解为方法上的一个参数。在组件上可以使用this.$route.params根据参数名获取参数值。
④编程式导航的几个常见方法
router.push(location,onComplete?,onAbort?)是使用在事件的方法中
<body>
<div id="app">
<h3>编程式导航</h3>
<button @click="sturou">学生</button>
<button @click="tearou">老师</button>
<router-view></router-view>
</div>
<script>
// //创建学生组件
// var stu = {
// template: `<div>学生界面</div>`
// }
// //创建老师组件
// var tea = {
// template: `<div>这是一个老师界面</div>`
// }
//创建路由对象
// var routers = [{ path: "/stu", component: stu ,name:"政委"}, { path: "/tea", component: tea ,name:"首长"}]
//命名路由
var user={
template:`<div>我是一个{{$route.params["name"]=="stu"?"学生":"老师"}} id={{id}} ids={{$route.query.ids}}</div>`,
props:["id"]
}
var routers = [{ path: "/user/:name/:id", component: user ,name:"政委",props:true}]
//实例路由器
var router = new VueRouter({ routes: routers });
var vm = new Vue({
el: "#app",
router: router,
methods: {
sturou() {
//用字符串查找路径
// router.push("/stu")
//用对象查找路径,根据对象中属性查找路由对象中对应的属性
// router.push({name:"政委"})
//命名的路由
// router.push({name:"政委",params:{name:"stu",id:100}})
//带查询参数
router.push({path:"/user/stu/100",query:{ids:88}})
},
tearou() {
//router.push("/tea")
//router.push({name:"首长"})
// router.push({name:"政委",params:{name:"tea",id:10}})
router.push({path:"/user/tea/10",query:{ids:99}})
}
}
})
</script>
</body>
router.replace(location,onComplete?,onAbort?)是使用在事件的方法中与router.push使用方法是一样的，只是replace没有历史地址及history，而push有历史地址。
router.go(num)直接跳转到历史记录中的num个地址，num为0是就是刷新跳转到当前地址，为负数时就是后退多少，为正数时就是前进多少。
⑤导航守卫（路由的构造函数）
<body>
<div id="app">
<button @click="teas">老师</button>
<button @click="stus">学生</button>
<router-view></router-view>
</div>
<script>
var zujian = {
template: `
<div>我是{{$route.params["name"]=="stu"?"学生":"老师"}},id={{id}} ids={{$route.query.ids}}</div>
`,
props: ["id"]
}
var routes = [{ path: "/user/:name/:id", component: zujian, props: true }]
var router = new VueRouter({ routes: routes })
router.beforeEach((to, from, next) => {//全局前置守卫 在路由渲染前调用的钩子函数
console.log("前");
next();//在这里进行判断是否渲染 如果渲染则调用next()，不渲染则不调用
})
// router.afterEach((to, from, next) => {//全局后置守卫 在路由渲染后调用的钩子函数 不接受next函数不会改变导航本身
// console.log("后")
// })
//路由独享的守卫 就是在实例路由对象中添加beforeEnter((to,from,next)=>{...}) 和全局前置一样..
//组件内的守卫
// const Foo = {
// template: `...`,
// beforeRouteEnter(to, from, next) {
// // 在渲染该组件的ù应路由被 confirm 前调用
// // 不！能！获取组件例 `this`
// // 因为当卫执行前，组件例还没被创建
// // 不过可以通过回调函数来获取，代码如下：
// /*
// beforeRouteEnter (to, from, next) {
// next(vm => {
// // 通过 `vm` 访问组件实例
// })
// }
// */
// },
// beforeRouteUpdate(to, from, next) {
// // 在当前路由改变，但是该组件被复用时调用
// // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
// // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
// // 可以访问组件实例 `this`
// },
// beforeRouteLeave(to, from, next) {
// // 导航离开该组件的对应路由时调用
// // 可以访问组件实例 `this`
// }
// }
var vm = new Vue({
el: "#app",
router,
methods: {
teas() {
router.push({ path: "/user/tea/100", query: { ids: "stu" } })
},
stus() {
router.push({ path: "/user/stu/80", query: { ids: "tea" } })
}
}
})
</script>
</body>