麻豆www999,国产精品三级

1.什么是Vue Router?

Vue Router和v-if/v-show一樣, 是用來(lái)切換組件的顯示的
v-if/v-show是標(biāo)記來(lái)切換(true/false)
Vue Router用哈希來(lái)切換(#/xxx)
比v-if/v-show強(qiáng)大的是Vue Router不僅僅能夠切換組件的顯示, 還能夠在切換的時(shí)候傳遞參數(shù)

2.Vue Router使用

2.1導(dǎo)入Vue Router
2.2定義路由規(guī)則
2.3根據(jù)路由規(guī)則創(chuàng)建路由對(duì)象
2.4將路徑對(duì)象掛載到Vue實(shí)例中
2.5修改URL哈希值
2.6通過(guò)<router-view>渲染匹配的組件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.js"></script>
<!--    1.導(dǎo)入vue-router，需要在vue導(dǎo)入之后再導(dǎo)入-->
    <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.創(chuàng)建URL進(jìn)行路由跳轉(zhuǎn)顯示-->
    <a href="#/one">第一個(gè)界面</a>
    <a href="#/two">第二個(gè)界面</a>
    <!-- 路由匹配到的組件將渲染在這里 -->
    <router-view></router-view>
</div>
<template id="one">
    <div class="onepage">我是第一個(gè)界面</div>
</template>
<template id="two">
    <div class="twopage">我是第二個(gè)界面</div>
</template>
<script>
    // 2.定義組件
    const one={template:"#one"};
    const two={template:"#two"};
    // 3.定義路由規(guī)則
    const routes=[
        {path:"/one",component:one},
        {path:"/two",component:two},
    ];
    //3. 創(chuàng)建vue-router實(shí)例
    const router=new VueRouter({
            routes:routes
    });
    let vue=new Vue({
        el:"#app",
        components:{
            one:one,
            two:two
        },
        //4. 將vue-router實(shí)例綁定大vue實(shí)例上
        router:router
    });
</script>
</body>
</html>

image.png

router-link

1.什么是router-link?
通過(guò)a標(biāo)簽確實(shí)能設(shè)置URL的hash,但是這種方式并不專業(yè)
在Vue Router中提供了一個(gè)專門用于設(shè)置hash的標(biāo)簽 router-link

2.router-link特點(diǎn)
默認(rèn)情況下Vue會(huì)將router-link渲染成a標(biāo)簽, 但是我們可以通過(guò)tag來(lái)指定到底渲染成什么

3.給router-link設(shè)置選中樣式
默認(rèn)情況下我們可以通過(guò)重寫(xiě)router-link-active類名來(lái)實(shí)現(xiàn)設(shè)置選中樣式
但是我們也可以通過(guò)linkActiveClass來(lái)指定選中樣式

4.重定向路由
{ path: '被重定向值', redirect: '重定向之后的值' }

通過(guò)a方法設(shè)置路由跳轉(zhuǎn)并不專業(yè)，vue提供了一種更加專業(yè)的標(biāo)簽來(lái)實(shí)現(xiàn)這個(gè)功能——router-link，瀏覽器會(huì)默認(rèn)把它轉(zhuǎn)化為a鏈接的形式

<div id="app">
<!--    6.創(chuàng)建URL進(jìn)行路由跳轉(zhuǎn)顯示-->
    <router-link to="/one">第一個(gè)界面</router-link>
    <router-link to="/two">第二個(gè)界面</router-link>
<!--    <a href="#/one">第一個(gè)界面</a>-->
<!--    <a href="#/two">第二個(gè)界面</a>-->
    <!-- 路由匹配到的組件將渲染在這里 -->
    <router-view></router-view>
</div>

瀏覽器elements里的顯示為

image.png

如果要想指定標(biāo)簽進(jìn)行路由，則可以給router-link指定tag

    <router-link to="/one" tag="button">第一個(gè)界面</router-link>
    <router-link to="/two" tag="button">第二個(gè)界面</router-link>

image.png

系統(tǒng)會(huì)默認(rèn)給選中的路由設(shè)置一個(gè)router-link-active的類名，只要重寫(xiě)這個(gè)類名的樣式則可以給選中狀態(tài)的路由控制器設(shè)置樣式了

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

image.png

但是這種做法并不是很好，自定義的會(huì)更加符合實(shí)際的需求
可以在創(chuàng)建vue-router實(shí)例時(shí)自定義通過(guò)linkActiveClass指定導(dǎo)航激活狀態(tài)樣式類名

            linkActiveClass: "shanjialan-active"

        .shanjialan-active{
            background-color: skyblue;

image.png

注意點(diǎn)：在剛開(kāi)始進(jìn)來(lái)的時(shí)候是看不見(jiàn)界面的，因?yàn)檫€沒(méi)有進(jìn)行跳轉(zhuǎn)，但是一般會(huì)默認(rèn)看到一個(gè)界面，這時(shí)需要用到路由重定向，定義在路由規(guī)則中，如下：

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

Vue Router傳遞參數(shù)

1.Vue Router傳遞參數(shù)
只要將Vue Router掛載到了Vue實(shí)例對(duì)象上, 我們就可以通過(guò)vue.$route拿到路由對(duì)象
只要能拿到路由對(duì)象, 就可以通過(guò)路由對(duì)象拿到傳遞的參數(shù)

方式一: 通過(guò)URL參數(shù)參數(shù)(?key=value&key=value), 通過(guò)this. $route.query獲取方式二: 通過(guò)占位符傳遞(路由規(guī)則中/:key/:key, 路徑中/value/value), 通過(guò)this.$ route.params獲取

第一種傳遞參數(shù)的方式: 通過(guò)URL參數(shù)的方式傳遞
在指定HASH的時(shí)候, 通過(guò)?key=value&key=value的方式傳遞
在傳遞的組件的生命周期方法中通過(guò) this.$route.query的方式來(lái)獲取

    <router-link to="/one?name=lnj&age=33" tag="button">切換到第一個(gè)界面</router-link>

第二種傳遞參數(shù)的方式: 通過(guò)路由規(guī)則中的占位符傳遞
在指定路由規(guī)則的時(shí)候通過(guò)/:key/:key的方式來(lái)指定占位符
在指定HASH的時(shí)候, 通過(guò)/value/value的方式來(lái)傳遞值
在傳遞的組件的生命周期方法中通過(guò) this.$route.params的方式來(lái)獲取

   <router-link to="/two/zs/66" tag="button">切換到第二個(gè)界面</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界面中又有兩個(gè)按鈕, 通過(guò)這兩個(gè)按鈕進(jìn)一步切換one中的內(nèi)容

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

注意點(diǎn): 如果是嵌套路由(子路由), 那么不用寫(xiě)一級(jí)路徑的地址, 并且也不用寫(xiě)/

    // 2.定義切換的規(guī)則(定義路由規(guī)則)
    const routes = [
        // 數(shù)組中的每一個(gè)對(duì)象就是一條規(guī)則
        {
            path: '/one',
            component: one,
            children:[
                {
                    // 注意點(diǎn): 如果是嵌套路由(子路由), 那么不用寫(xiě)一級(jí)路徑的地址, 并且也不用寫(xiě)/
                    path: "onesub1",
                    component: onesub1
                },
                {
                    // 注意點(diǎn): 如果是嵌套路由(子路由), 那么不用寫(xiě)一級(jí)路徑的地址, 并且也不用寫(xiě)/
                    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.導(dǎo)入vue-router，需要在vue導(dǎo)入之后再導(dǎo)入-->
    <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.創(chuàng)建URL進(jìn)行路由跳轉(zhuǎn)顯示-->
    <router-link to="/one" tag="button">第一個(gè)界面</router-link>
    <router-link to="/two" tag="button">第二個(gè)界面</router-link>
    <!--    <a href="#/one">第一個(gè)界面</a>-->
    <!--    <a href="#/two">第二個(gè)界面</a>-->
    <!-- 路由匹配到的組件將渲染在這里 -->
    <router-view></router-view>
</div>
<template id="one">
    <div class="onepage">
        <div>我是第一個(gè)界面</div>
        <router-link to="/one/sub1" tag="button">第一個(gè)子界面</router-link>
        <router-link to="/one/sub2" tag="button">第二個(gè)子界面</router-link>
        <router-view></router-view>
    </div>
</template>
<template id="two">
    <div class="twopage">我是第二個(gè)界面</div>
</template>
<template id="sub1">
    <div class="sub1page">我是第二個(gè)界面</div>
</template>
<template id="sub2">
    <div class="sub2page">我是第二個(gè)界面</div>
</template>
<script>
    // 2.定義組件
    const one={template:"#one"};
    const two={template:"#two"};
    const sub1={template:"#sub1"};
    const sub2={template:"#sub2"};
    // 3.定義路由規(guī)則
    const routes=[
        // 重定向路由
        { path: '/', redirect: '/two' },
        {
            path:"/one",
            component:one,
            children:[
                {path:'sub1',component:sub1},
                {path:'sub2',component:sub2},
            ]

        },
        {path:"/two",component:two},
    ];
    //3. 創(chuàng)建vue-router實(shí)例
    const router=new VueRouter({
        routes:routes,
        // 指定導(dǎo)航激活狀態(tài)樣式類名
        linkActiveClass: "shanjialan-active"
    });
    let vue=new Vue({
        el:"#app",
        components:{
            one:one,
            two:two
        },
        //4. 將vue-router實(shí)例綁定大vue實(shí)例上
        router:router
    });
</script>
</body>
</html>

image.png

命名視圖

1.什么是命名視圖?
命名視圖和前面講解的具名插槽很像, 都是讓不同的出口顯示不同的內(nèi)容
命名視圖就是當(dāng)路由地址被匹配的時(shí)候同時(shí)指定多個(gè)出口, 并且每個(gè)出口中顯示的內(nèi)容不同

2.和具名插槽一樣, 如果想同時(shí)顯示多個(gè)不同的組件, 那么可以給出口指定名稱

1.在路由規(guī)則中給組件起名稱,命名名字：組件名字
2.在出口中指定顯示哪個(gè)名稱的組件 name="命名名字"

    const routes = [
        // 數(shù)組中的每一個(gè)對(duì)象就是一條規(guī)則
        {
            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屬性是專門用于監(jiān)聽(tīng)數(shù)據(jù)變化的, 只要數(shù)據(jù)發(fā)生了變化, 就會(huì)自動(dòng)調(diào)用對(duì)應(yīng)數(shù)據(jù)的回調(diào)方法

2.Watch監(jiān)聽(tīng)路由變化
Watch屬性不僅僅能夠監(jiān)聽(tīng)數(shù)據(jù)的變化, 還能夠監(jiān)聽(tīng)路由地址的變化
在企業(yè)開(kāi)發(fā)中我們可以通過(guò)Watch來(lái)判斷當(dāng)前界面是從哪個(gè)界面跳轉(zhuǎn)過(guò)來(lái)的

3.可以通過(guò)watch監(jiān)聽(tīng)Model中數(shù)據(jù)的變化, 只要數(shù)據(jù)發(fā)生變化, 就會(huì)自動(dòng)調(diào)用對(duì)應(yīng)的回調(diào)函數(shù)

<!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>

image.png

** 可以通過(guò)創(chuàng)建的vue實(shí)例對(duì)象的Route監(jiān)聽(tīng)路由的變化vue.$route**
console.log(vue.$route);

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

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

Vue-router（第五天）

Vue-router（第五天）

1.什么是Vue Router?

2.Vue Router使用

router-link

Vue Router傳遞參數(shù)

嵌套路由

命名視圖

watch

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九 欧美,1769亚洲,黄色成人av

Vue-router（第五天）

1.什么是Vue Router?

2.Vue Router使用

router-link

Vue Router傳遞參數(shù)

嵌套路由

命名視圖

watch

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av