通俗易懂地讲解 Vue-router_vue-router 通俗的解释

作者：Cpp五条 | 2024-03-20 00:37:09

踩

vue-router 通俗的解释

<head>
    <meta charset="UTF-8">
    <title>vuejs 教程</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <style>
        .router-link-active{
            font-size: 20px;
            color:#f60;
        }
    </style>
    <script src="vue.js"></script>
    <script src="bower_components/vue-router/dist/vue-router.min.js"></script>
</head>
<body>
    <div id="box">

        <div>
            <router-link to="/home">主页</router-link>
            <router-link to="/user">用户</router-link>
        </div>
        <div>
            <router-view></router-view>
        </div>
    </div>

    <template id="home">

        <div>
            <h3>我是用户信息</h3>
            <ul>
                <li><router-link to="/user/strive/age/10">Strive</router-link></li>
                <li><router-link to="/user/blue/age/80">Blue</router-link></li>
                <li><router-link to="/user/eric/age/70">Eric</router-link></li>
            </ul>
            <div>
                <router-view></router-view>
            </div>
        </div>

    </template>

    <script>
        //组件
        var Home={
            template:'<h3>我是主页</h3>'
        };
        var User={
            template:'#home'
        };
        var UserDetail={
            template:'<div>{{$route.params}}</div>'
        };

        //配置路由
        const routes=[
            {path:'/home', component:Home},
            {
                path:'/user',
                component:User,
                children:[
                    {path:':username/age/:age', component:UserDetail}
                ]
            },
            {path:'*', redirect:'/home'}  //404
        ];

        //生成路由实例
        const router=new VueRouter({
            routes
        });


        //最后挂到vue上
        new Vue({
            router
        }).$mount('#box');
    </script>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80

router说明:

  Router简单说明

  #使用程序跳转(类似angularjs的$state.go)
  this.$router.push(location, onComplete?, onAbort?);

  #返回历史页面 类似 history.go(-1)
  this.$router.go(-1)

  //router.back()、router.forward()

  #页面link使用
  <router-link :to="ch.url">{{ch.text}}</router-link>

  //或者 li>a 就这样

  <router-link tag="li" to="/home" active-class="active" :key="index">
    <a>Home</a>
  </router-link>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

watch监控router

watch: {
  $route() 
    // 检查是否一级菜单链接
    this.checkMenuActived(this.$route.path);
  }
}1
2
3
4
5
6

路由对象，即$router会被注入每个组件中，可以利用它进行一些信息的获取

$route.path   当前路由对象的路径，如’/view/a’
$rotue.params  关于动态片段（如/user/:username)的键值对信息,如{username: ‘paolino’}
$route.query   请求参数，如/foo?user=1获取到query.user = 1
$route.router  所属路由器以及所属组件信息
$route.matched 数组，包含当前匹配的路径中所包含的所有片段所对应的配置参数对象。
$route.name    当前路径名字1
2
3
4
5
6

在每次发生路由导航是最开始先检测用户是否登录

router.beforeEach(({meta, path}, from, next) => {　　

　　const {auth = true} = meta      // meta代表的是to中的meta对象，path代表的是to中的path对象

　　var isLogin = Boolean(store.state.user.id)    // true用户已登录， false用户未登录　
　　
　　if (auth  &&  !isLogin  &&  path !== '/login') {   // auth 代表需要通过用户身份验证，默认为true，代表需要被验证， false为不用检验
　　　　return next({ path: '/login' })   //  跳转到login页面
　　}


　　next()   // 进行下一个钩子函数
})


它的三个参数：

to: (Route路由对象)  即将要进入的目标 路由对象       to对象下面的属性： path   params  query   hash   fullPath    matched   name    meta（在matched下，但是本例可以直接用）

from: (Route路由对象)  当前导航正要离开的路由

next: (Function函数)   一定要调用该方法来 resolve 这个钩子。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

js路由跳转的几种方式

// 字符串
this.router.push('home')

// 对象
this.$router.push({path: '/login?url=' + this.$route.path});

// 命名的路由
router.push({ name: 'user', params: { userId: 123 }})

// 带查询参数，变成/backend/order?selected=2
this.$router.push({path: '/backend/order', query: {selected: "2"}});

// 设置查询参数
this.$http.post('v1/user/select-stage', {stage: stage})
      .then(({data: {code, content}}) => {
            if (code === 0) {
                // 对象
                this.$router.push({path: '/home'});
            }else if(code === 10){
                // 带查询参数，变成/login?stage=stage
                this.$router.push({path: '/login', query:{stage: stage}});
           }
});

// 设计查询参数对象
let queryData = {};
if (this.$route.query.stage) {
    queryData.stage = this.$route.query.stage;
}
if (this.$route.query.url) {
    queryData.url = this.$route.query.url;
}
this.$router.push({path: '/my/profile', query: queryData});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/Cpp五条/article/detail/269389