vuerouter地址改变了页面没有跳转_VUE Router学习原理（二）

点击蓝字 关注我们

                        Vue Router

        一. 安装

        二. 导入

        三. 说明

        四. 使用

  4.1 静态页面跳转

                    4.2 动态页面跳转

                    4.3 子路由

                    4.4 通过程序传参

                    4.5 同时(同级)展示多个视图

                    4.6 导航钩子

继VUE Router学习原理(一)后续

VUE Router学习原理(一)链接

https://mp.weixin.qq.com/s/p-Lghdp-pLse22LtY1vT8g

肆·使用

4.4通过程序传参

·路由:在回退时回到上一层

·js

router.push(location, onComplete?, onAbort?)

·替换:替换掉当前的 history 记录, 在回退时不会回到上一层

·js

router.replace(location,onComplete?, onAbort?)

·回退

·js

router.go(n)

·带有参数的路由

·js

{
   name: 'usr'
   path: '/usr/:name',
   component: {
       template: `

I am {{ $route.params.name }}

more

`
   }
} ·js

router.push({ name: 'user', params: { userId: '123' }})

·带查询参数:/usr?usrname=private

·js

router.push({ path: 'usr', query: { usrname: 'AAA' }})

参考 官方网站

注意

this的指向

params中的属性名称必须存在

4.5同时(同级)展示多个视图

·案例:默认为 default

·html

·注册:使用components注册

·js

var router = new VueRouter({
   routes: [
       {
           path: '/',
           name: 'main',
           components: {
               default: {
                   template: `

首页

`
               }
               a: {
                   template: `

babaab

`
               },
               b: {
                   template: `

bcbcbc

`
               }
           }
       },
       xxx xxx xxx
});

4.6导航钩子

·过滤器:没有登录时跳转到登录页面

·js

router.beforeEach(function(to, from, next){
   let logged_in = false;
   if(to.path == '/post' && !logged_in)
       next('/login'); // 跳转到登录页
   else
       next();         // 继续
});

·匹配:使用meta(元数据)完成判断

·js

routes: [
   {
       path: '/',
       name: 'main',
       meta: {
           login_required: true
       },
       components: {
           default: {
               template: `

首页

`
           }
       }
   },
   xxx xxx xxx ·js

router.beforeEach(function(to, from, next){
   let logged_in = false;
   if(!logged_in && to.matched.some(function(item){
           return item.meta.login_required;
   })) {
       next('/login'); // 跳转到登录页
   } else {
       next();         // 继续
   }
});

画外音

VUE-Router学习笔记

更新完毕

我知道你“在看”哟～