1. 前言
先理清楚
router基础,在切换到 脚手架项目就容易了
2.嵌套路由
书接上文 可以直接套用上篇文章的模板
核心
路由的嵌套
children属性,对应的值也是个路由配置可以嵌套多层
redirect
默认的子路由渲染
redirect: "/comment",
const rs = [ { // 默认路由 path: "/", component: Home }, { // 第二种方式:通过命名式路由跳转 path: "/home", name: "home", component: Home }, { path: "/artD", name: "article", component: Article, // 默认的子路由渲染 redirect: "/comment", // 设置Article同级路由下的子路由配置信息 // 子路由设置 children: [ { path: "/artDetil", name: "art", component: ArtDetail, }, { path: "/comment", name: "comment", component: Comment } ] } ];
只需要更改这个配置就行, 其他的和上篇文章一样
3. 监听 路由 watch
注意
$route
watch: { $route: function (newV, oldV) { console.log("路由改变", newV, oldV) this.artObj = this.$route.query.obj; } },
第二种写法
watch: { '$route' (to, from) { const toDepth = to.path.split('/').length const fromDepth = from.path.split('/').length this.transitionName = toDepth < fromDepth ? 'slide-right' : 'slide-left' } }
4. 路由钩子
可以回想
node的 中间件usenext的用法
beforeRouteUpdate(newV, oldV,next) { // 路由正常切换 next() this.artObj = newV.query.obj; console.log("------beforeRouteUpdate",newV.query.obj.title); console.log("------路由旧的:",oldV.query.obj.title); }, routeUpdated() { console.log("updated") },
5.路由 简易案例
基本 html结构
<nav id="tab-bar" v-show="showNav"> <ul id="tab-bar-list"> <li class="tab-bar-item" :class="{active:currentTabIndex==0}"> <a href="#/home">首页</a> </li> <li class="tab-bar-item" :class="{active:currentTabIndex==1}"> <!-- 在vue中推荐使用router-link标签实现页内跳转 --> <router-link to="/addressbook">通讯录</router-link> </li> <li class="tab-bar-item" :class="{active:currentTabIndex==2}"> <router-link to="/discovery">发现</router-link> </li> <li class="tab-bar-item" :class="{active:currentTabIndex==3}"> <router-link to="/setting">设置</router-link> </li> </ul> </nav> <!-- 路由页面切换时，也可以通过transition添加动画 --> <transition :name="aniType"> <!-- 和动态组件相同，页面级组件之间切换时也是销毁消失的组件，切回时再次创建，如果希望保存消失的组件，可以使用keep-alive --> <keep-alive> <!-- 在vue中，使用router-view作为路由视图，根据hash值匹配到的组件会显示在router-view中 --> <router-view></router-view> </keep-alive> </transition>
有二级页面的 一级页面组件
<script type="text/html" id="addressbook"> <div class="add-root first-level-page"> <h1>联系人联系人联系人</h1> <ul> <li v-for="p in peoples"> <router-link :to="'/addressbook/chat/'+p">{{p}}</router-link> </li> </ul> </div> </script>
二级页面
var chat = { template:` <div class="chat-root"> <button @click="backClick">返回</button> <p>和{{name}}聊天中。。。。。</p> </div> `, // mounted钩子函数在组件渲染完毕之后调用，如果组件被隐藏并使用了keep-alive，再次切回时，mounted不会再次调用。 // mounted(){ // console.log(this.$route); // } //activated钩子函数，当组件被激活时调用（隐藏后再次出现） activated(){ // console.log(this.$route); }, computed:{ name:function(){ return this.$route.params.name; } }, methods:{ backClick(){ history.back(); } } }
计算属性 动态判断显示哪个界面
computed:{ //当前显示的页面索引 currentTabIndex(){ if(this.$route.fullPath=="/home"){ return 0; } if(this.$route.fullPath=="/addressbook"){ return 1; } if(this.$route.fullPath=="/discovery"){ return 2; } if(this.$route.fullPath=="/setting"){ return 3; } } }
路由监听
mounted(){ var nPageLevel = this.$route.fullPath.split("/").length; if(nPageLevel==2){ this.showNav = true; }else{ this.showNav = false; } }, watch:{ // $route对象可以使用watch进行监听，每当页面的hash值发生变化时，监听函数就会调用 $route:function(n,o){ // 根据原始页面和目标页面判断需要执行的动画类型 var oldPageLevel = o.fullPath.split("/").length; var nPageLevel = n.fullPath.split("/").length; console.log(oldPageLevel); console.log(nPageLevel); if(oldPageLevel>nPageLevel){ //执行返回动画 this.aniType = "pageout"; }else if(oldPageLevel<nPageLevel){ //执行进入动画 this.aniType = "pagein"; }else{ //不执行动画 this.aniType = ""; } if(nPageLevel==2){ this.showNav = true; }else{ this.showNav = false; } } },
