vue筆記-6 vue中router路由 路由引數的傳遞 巢狀路由

m0_47734729發表於2020-10-09
Vue筆記路由巢狀

Vue中的路由

VueRouter

路由:根據請求的路徑按照一定的路由規則 進行的請求轉發 從而幫助我們實現請求的管理

作用:在vue中實現元件的動態切換

線上引入路由的cdn:
`

` 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>


<div id="app">

    <!-- 根據連線切換不同的路由元件 -->
    <a href="#/login">點我登入</a>
    <a href="#/register">點我註冊</a>

    <!--顯示路由的元件-->
    <router-view></router-view>

</div>


<!--引入vue-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!--vue 路由js-->
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>


<script>

    //建立登入的元件
    const login = {
        template:" <div>  <h1>登入</h1>  </div> "
    };

    //建立註冊的元件
    const register = {
        template:" <div>  <h1>註冊</h1>  </div> "
    };

    //建立路由物件
    const route = new VueRouter({
        // routes !!! 非 routers
        routes:[
            //路由規則  設定請求路徑  path: 路由的路徑  component:路徑對應的元件
            {path:'/login',component:login},
            {path:'/register',component: register}
        ]
    });

    //建立Vue例項
    const app = new Vue({
        el:"#app",
        data:{},
        methods: {},
        components: {
            //註冊元件
            login,
            register
        },
        //註冊路由物件
        router:route
    });

</script>


</body>
</html>

在這裡插入圖片描述

在這裡插入圖片描述在這裡插入圖片描述

router-link

作用:用來替換我們在切換路由時a標籤切換路由 不需要手動加入 #

1.router-link 用來替換使用a標籤實現路由切換 好處是不需要書寫#號直接書寫路由路徑
2.router-link to屬性用來書寫路由路徑 tag屬性:用來將router-link渲染成指定的標籤

預設路由

path:'/' ,redirect:'/***'
作用:用來第一次接入介面所展示的一個預設的元件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>


<div id="app">

    <!-- 根據連線切換不同的路由元件 -->
    <!--router-link 好處:書寫路由路徑不需要# to: 用來書寫路由路徑 -->
    <router-link to="/login" >我要登入</router-link>
    <router-link to="/register" >點我註冊</router-link>

    <!--顯示路由的元件-->
    <router-view></router-view>

</div>


<!--引入vue-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!--vue 路由js-->
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>


<script>

    //建立登入的元件
    const login = {
        template:" <div>  <h1>登入</h1>  </div> "
    };

    //建立註冊的元件
    const register = {
        template:" <div>  <h1>註冊</h1>  </div> "
    };

    const def= {
        template: " <div>  <h1>預設顯示的元件</h1> </div> "
    };

    //建立路由物件
    const route = new VueRouter({
        // routes !!! 非 routers
        routes:[
            //路由規則  設定請求路徑  path: 路由的路徑  component:路徑對應的元件
            {path: '/' ,redirect:'/def'},
            {path:'/def',component: def},
            {path:'/login',component:login},
            {path:'/register',component: register}
        ]
    });

    //建立Vue例項
    const app = new Vue({
        el:"#app",
        data:{},
        methods: {},
        components: {
            //註冊元件
            login,
            register,
            def
        },
        //註冊路由物件
        router:route
    });

</script>


</body>
</html>

在這裡插入圖片描述

在這裡插入圖片描述

路由中引數的傳遞

通過?號形式拼接引數 和 採用restful風格 拼接引數

使用? 形式拼接引數時
元件獲取引數 $route.query.引數名

使用restful 傳遞引數時

路由規則:var router = new VueRouter({ routes:[ {path:'/register/:引數名/:引數名',component:元件物件} //定義路徑中獲取對應引數 ] });

元件獲取引數 $route.params.引數名

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>


<div id="app">

<!--    使用?拼接-->
    <router-link to="/login?id=999&name=小新" >我要登入</router-link>

<!--    使用restful風格-->
    <router-link to="/register/111/小白" >點我註冊</router-link>

    <!--顯示路由的元件-->
    <router-view></router-view>

</div>


<!--引入vue-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!--vue 路由js-->
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>


<script>

    //建立登入的元件
    const login = {
        template:'<h1>使用者登入{{ this.$route.query.id }} {{ this.$route.query.name }}</h1>',
    };

    //建立註冊的元件
    const register = {
        template:'<h1>使用者註冊 {{ $route.params.id }} {{ $route.params.name }}</h1>',
        created(){
            console.log("註冊元件中id:   "+this.$route.params.id+this.$route.params.name);
        }
    };


    const def= {
        template: " <div>  <h1>預設顯示的元件</h1> </div> "
    };

    //建立路由物件
    const route = new VueRouter({
        // routes !!! 非 routers
        routes:[
            //路由規則  設定請求路徑  path: 路由的路徑  component:路徑對應的元件
            {path: '/' ,redirect:'/def'},
            {path:'/def',component: def},


            {path:'/login',component:login},
            {path: '/register/:id/:name', component: register}

            
        ]
    });

    //建立Vue例項
    const app = new Vue({
        el:"#app",
        data:{},
        methods: {},
        components: {
            //註冊元件
            login,
            register,
            def
        },
        //註冊路由物件
        router:route
    });

</script>


</body>
</html>

在這裡插入圖片描述

巢狀路由的使用

1.宣告最外層路由和最內層路由
<template id="product">

    <div>

        <h1>商品管理</h1>

        <router-link to="/product/add">商品新增</router-link>
        <router-link to="/product/del">商品刪除</router-link>

        <router-view></router-view>

    </div>

</template>

建立路由物件含有巢狀路由

const router = new VueRouter({ routes:[ { path:'/product', //父元件的路徑 component:product, //父元件 children:[ //子元件 {path:'add',component: add}, //子元件的路由路徑 {path:'del',component: del}, ] }, ] });

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>巢狀路由的使用</title>
</head>
<body>


<div id="app">


    <router-link to="/product">商品管理</router-link>
    <!--顯示路由的元件-->
    <router-view></router-view>

</div>


<template id="product">

    <div>

        <h1>商品管理</h1>

        <router-link to="/product/add">商品新增</router-link>
        <router-link to="/product/del">商品刪除</router-link>

        <router-view></router-view>

    </div>

</template>


<!--引入vue-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!--vue 路由js-->
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>


<script>

   //建立最外層元件
   const product = {
      template:'#product',
   };


   const add = {
       template:'<h4>商品新增</h4>'
   };

   const del = {
       template:'<h4>商品編輯</h4>'
   };




   //定義路由物件
   const router = new VueRouter({
       routes:[
           {
               path:'/product',
               component:product,
               children:[
                   {path:'add',component: add},
                   {path:'del',component: del},
               ]
           },
       ]
   });

    //建立Vue例項
    const app = new Vue({
        el:"#app",
        data:{},
        methods: {},
        //註冊路由物件
        router:router
    });

</script>


</body>
</html>

在這裡插入圖片描述

相關文章