备案控制台
开发者社区 开发与运维 文章 正文

Vue-router（第五天）

2023-06-12 45
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： Vue-router（第五天）
1.什么是Vue Router?

Vue Router和v-if/v-show一样, 是用来切换组件的显示的

v-if/v-show是标记来切换(true/false)

Vue Router用哈希来切换(#/xxx)

比v-if/v-show强大的是Vue Router不仅仅能够切换组件的显示, 还能够在切换的时候传递参数

2.Vue Router使用

2.1导入Vue Router

2.2定义路由规则

2.3根据路由规则创建路由对象

2.4将路径对象挂载到Vue实例中

2.5修改URL哈希值

2.6通过<router-view>渲染匹配的组件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.js"></script>
<!--    1.导入vue-router，需要在vue导入之后再导入-->
    <script src="vue-router.js"></script>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .onepage, .twopage{
            width: 500px;
            height: 500px;
        }
        .onepage{
            background: pink;
        }
        .twopage{
            background: skyblue;
        }
    </style>
</head>
<body>
<div id="app">
<!--    6.创建URL进行路由跳转显示-->
    <a href="#/one">第一个界面</a>
    <a href="#/two">第二个界面</a>
    <!-- 路由匹配到的组件将渲染在这里 -->
    <router-view></router-view>
</div>
<template id="one">
    <div class="onepage">我是第一个界面</div>
</template>
<template id="two">
    <div class="twopage">我是第二个界面</div>
</template>
<script>
    // 2.定义组件
    const one={template:"#one"};
    const two={template:"#two"};
    // 3.定义路由规则
    const routes=[
        {path:"/one",component:one},
        {path:"/two",component:two},
    ];
    //3. 创建vue-router实例
    const router=new VueRouter({
            routes:routes
    });
    let vue=new Vue({
        el:"#app",
        components:{
            one:one,
            two:two
        },
        //4. 将vue-router实例绑定大vue实例上
        router:router
    });
</script>
</body>
</html>

35.png

image.png


35.png

image.png

router-link

1.什么是router-link?

通过a标签确实能设置URL的hash,但是这种方式并不专业

在Vue Router中提供了一个专门用于设置hash的标签 router-link

2.router-link特点

默认情况下Vue会将router-link渲染成a标签, 但是我们可以通过tag来指定到底渲染成什么

3.给router-link设置选中样式

默认情况下我们可以通过重写router-link-active类名来实现设置选中样式

但是我们也可以通过linkActiveClass来指定选中样式

4.重定向路由

{ path: '被重定向值', redirect: '重定向之后的值' }

通过a方法设置路由跳转并不专业，vue提供了一种更加专业的标签来实现这个功能——router-link，浏览器会默认把它转化为a链接的形式

<div id="app">
<!--    6.创建URL进行路由跳转显示-->
    <router-link to="/one">第一个界面</router-link>
    <router-link to="/two">第二个界面</router-link>
<!--    <a href="#/one">第一个界面</a>-->
<!--    <a href="#/two">第二个界面</a>-->
    <!-- 路由匹配到的组件将渲染在这里 -->
    <router-view></router-view>
</div>

浏览器elements里的显示为

34.png

image.png

如果要想指定标签进行路由，则可以给router-link指定tag

<router-link to="/one" tag="button">第一个界面</router-link>
    <router-link to="/two" tag="button">第二个界面</router-link>

33.png


image.png

系统会默认给选中的路由设置一个router-link-active的类名，只要重写这个类名的样式则可以给选中状态的路由控制器设置样式了

.router-link-active{
            background-color: red;
        }

32.png


image.png


但是这种做法并不是很好，自定义的会更加符合实际的需求

可以在创建vue-router实例时自定义通过linkActiveClass指定导航激活状态样式类名

linkActiveClass: "shanjialan-active"

.shanjialan-active{
            background-color: skyblue;

31.png

image.png

注意点：在刚开始进来的时候是看不见界面的，因为还没有进行跳转，但是一般会默认看到一个界面，这时需要用到路由重定向，定义在路由规则中，如下：

const routes=[
        // 重定向路由
        { path: '/', redirect: '/two' },
        {path:"/one",component:one},
        {path:"/two",component:two},
    ];

Vue Router传递参数

1.Vue Router传递参数

只要将Vue Router挂载到了Vue实例对象上, 我们就可以通过vue.$route拿到路由对象

只要能拿到路由对象, 就可以通过路由对象拿到传递的参数

方式一: 通过URL参数参数(?key=value&key=value), 通过this.30.png

route.params获取

第一种传递参数的方式: 通过URL参数的方式传递

在指定HASH的时候, 通过?key=value&key=value的方式传递

在传递的组件的生命周期方法中通过 this.$route.query的方式来获取

<router-link to="/one?name=lnj&age=33" tag="button">切换到第一个界面</router-link>

第二种传递参数的方式: 通过路由规则中的占位符传递

在指定路由规则的时候通过/:key/:key的方式来指定占位符

在指定HASH的时候, 通过/value/value的方式来传递值

在传递的组件的生命周期方法中通过 this.$route.params的方式来获取

<router-link to="/two/zs/66" tag="button">切换到第二个界面</router-link>

const one = {
        template: "#one",
        created: function () {
            console.log(this.$route);
            console.log(this.$route.query.name);
            console.log(this.$route.query.age);
        }
    };
    const two = {
        template: "#two",
        created: function () {
            console.log(this.$route);
            console.log(this.$route.params.name);
            console.log(this.$route.params.age);
        }
    };

嵌套路由

1.什么是嵌套路由?

嵌套路由也称之为子路由, 就是在被切换的组件中又切换其它子组件

例如: 在one界面中又有两个按钮, 通过这两个按钮进一步切换one中的内容

<template id="one">
    <div class="onepage">
        <div>我是第一个界面</div>
        <router-link to="/one/sub1" tag="button">第一个子界面</router-link>
        <router-link to="/one/sub2" tag="button">第二个子界面</router-link>
        <router-view></router-view>
    </div>
</template>

注意点: 如果是嵌套路由(子路由), 那么不用写一级路径的地址, 并且也不用写/

// 2.定义切换的规则(定义路由规则)
    const routes = [
        // 数组中的每一个对象就是一条规则
        {
            path: '/one',
            component: one,
            children:[
                {
                    // 注意点: 如果是嵌套路由(子路由), 那么不用写一级路径的地址, 并且也不用写/
                    path: "onesub1",
                    component: onesub1
                },
                {
                    // 注意点: 如果是嵌套路由(子路由), 那么不用写一级路径的地址, 并且也不用写/
                    path: "onesub2",
                    component: onesub2
                }
            ]
        },
        // { path: '/one/onesub1', component: onesub1 },
        // { path: '/one/onesub2', component: onesub2 },
        { path: '/two', component: two }
    ];

完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.js"></script>
    <!--    1.导入vue-router，需要在vue导入之后再导入-->
    <script src="vue-router.js"></script>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .onepage, .twopage{
            width: 500px;
            height: 500px;
        }
        .onepage{
            background: pink;
        }
        .twopage{
            background: skyblue;
        }
        .sub1page{
            width: 500px;
            height: 200px;
            background: green;
        }
        .sub2page{
            width: 500px;
            height: 200px;
            background: palevioletred;
        }
        /*.router-link-active{*/
        /*    background-color: red;*/
        /*}*/
        .shanjialan-active{
            background-color: skyblue;
        }
    </style>
</head>
<body>
<div id="app">
    <!--    6.创建URL进行路由跳转显示-->
    <router-link to="/one" tag="button">第一个界面</router-link>
    <router-link to="/two" tag="button">第二个界面</router-link>
    <!--    <a href="#/one">第一个界面</a>-->
    <!--    <a href="#/two">第二个界面</a>-->
    <!-- 路由匹配到的组件将渲染在这里 -->
    <router-view></router-view>
</div>
<template id="one">
    <div class="onepage">
        <div>我是第一个界面</div>
        <router-link to="/one/sub1" tag="button">第一个子界面</router-link>
        <router-link to="/one/sub2" tag="button">第二个子界面</router-link>
        <router-view></router-view>
    </div>
</template>
<template id="two">
    <div class="twopage">我是第二个界面</div>
</template>
<template id="sub1">
    <div class="sub1page">我是第二个界面</div>
</template>
<template id="sub2">
    <div class="sub2page">我是第二个界面</div>
</template>
<script>
    // 2.定义组件
    const one={template:"#one"};
    const two={template:"#two"};
    const sub1={template:"#sub1"};
    const sub2={template:"#sub2"};
    // 3.定义路由规则
    const routes=[
        // 重定向路由
        { path: '/', redirect: '/two' },
        {
            path:"/one",
            component:one,
            children:[
                {path:'sub1',component:sub1},
                {path:'sub2',component:sub2},
            ]
        },
        {path:"/two",component:two},
    ];
    //3. 创建vue-router实例
    const router=new VueRouter({
        routes:routes,
        // 指定导航激活状态样式类名
        linkActiveClass: "shanjialan-active"
    });
    let vue=new Vue({
        el:"#app",
        components:{
            one:one,
            two:two
        },
        //4. 将vue-router实例绑定大vue实例上
        router:router
    });
</script>
</body>
</html>

29.png

image.png

命名视图

1.什么是命名视图?

命名视图和前面讲解的具名插槽很像, 都是让不同的出口显示不同的内容

命名视图就是当路由地址被匹配的时候同时指定多个出口, 并且每个出口中显示的内容不同

2.和具名插槽一样, 如果想同时显示多个不同的组件, 那么可以给出口指定名称

  • 1.在路由规则中给组件起名称,命名名字：组件名字
  • 2.在出口中指定显示哪个名称的组件  name="命名名字"

const routes = [
        // 数组中的每一个对象就是一条规则
        {
            path: '/',
            components: {
                name1: one,
                name2: two
            }
        },
    ];

<div id="app">
    <router-view name="name1"></router-view>
    <router-view name="name2"></router-view>
</div>

watch

1.什么是Watch属性?

Watch属性是专门用于监听数据变化的, 只要数据发生了变化, 就会自动调用对应数据的回调方法

2.Watch监听路由变化

Watch属性不仅仅能够监听数据的变化, 还能够监听路由地址的变化

在企业开发中我们可以通过Watch来判断当前界面是从哪个界面跳转过来的

3.可以通过watch监听Model中数据的变化, 只要数据发生变化, 就会自动调用对应的回调函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.js"></script>
</head>
<body>
<div id="app">
    <input type="text" v-model="num1">
    <span>+</span>
    <input type="text" v-model="num2">
    <span>=</span>
    <input type="text" v-model="res" disabled>
</div>
<script>
    let vue=new Vue({
        el:"#app",
        data:{
            num1:0,
            num2:0,
            res:0
        },
        watch:{
            num1:function (newValue,oldValue){
               this.res = parseInt(this.num1)+parseInt(this.num2)
            },
            num2:function (newValue,oldValue){
                this.res = parseInt(this.num1)+parseInt(this.num2)
            }
        }
    });
</script>
</body>
</html>

28.png

image.png


** 可以通过创建的vue实例对象的Route监听路由的变化vue.$route**

console.log(vue.$route);

watch:(
          "$route.path": function (newValue, oldValue) {
              console.log(newValue, oldValue);
          }),


文章标签：
JavaScript
YiYa_咿呀
目录
相关文章
yqcoder
|
29天前
|
移动开发 JavaScript 前端开发
Vue-Router 官网速通（上）
Vue-Router 官网速通（上）
yqcoder
15 1
yqcoder
|
29天前
|
JavaScript 前端开发 API
Vue-Router 官网速通（下）
Vue-Router 官网速通（下）
yqcoder
14 0
你都不懂
|
1月前
|
JavaScript
Vue 学习记录，从难受到真香
Vue 学习记录，从难受到真香
你都不懂
23 2
二进制怪兽
|
8月前
|
JSON JavaScript 前端开发
[笔记]vue从入门到入坟《四》HBuilderX Vue开发
[笔记]vue从入门到入坟《四》HBuilderX Vue开发
二进制怪兽
62 0
CaptainDrake
|
9月前
|
JavaScript API
Vue3 小兔鲜：Pinia入门
Vue3 小兔鲜：Pinia入门
CaptainDrake
68 0
陈书予
|
12月前
|
存储 JavaScript 前端开发
【三十天精通 Vue 3】 第一天 Vue 3入门指南
【三十天精通 Vue 3】 第一天 Vue 3入门指南
陈书予
199 1
陈书予
|
12月前
|
缓存 JavaScript 前端开发
【三十天精通Vue 3】第九天 Vue 3 路由详解
【三十天精通Vue 3】第九天 Vue 3 路由详解
陈书予
183 0
我想giao啊
|
12月前
|
JavaScript
VUE第五天
VUE第五天
我想giao啊
42 0
我想giao啊
|
12月前
|
JavaScript
VUE第四天
VUE第四天
我想giao啊
38 0
我想giao啊
|
12月前
|
JavaScript
VUE第三天
VUE第三天
我想giao啊
48 0