vue學習路由嵌套

時間 2019-12-04

原文原文鏈接

1. 路由嵌套和參數傳遞

傳參的兩種形式：
    a.查詢字符串：login?name=tom&pwd=123
        {{$route.query}}
       ------ 
        
        <li><router-link to="/user/login?name=wushi&pass=123">用戶登陸</router-link></li>
        {{$route.query}}
        
    b.rest風格url：regist/alice/456
        {{$route.params}}
        
        
         <li><router-link to="/user/regist/qwe/123">用戶註冊</router-link></li>
         {{$route.params}}
         
    c.{{$route.path}}
    獲取url路徑

路由實例

router.push({path:'/home'})  添加路由，功能上與<route-link>相同
router.replace({path:'/home'}) 替換路由，不產生歷史記錄

完整示例代碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">

    <script src="js/vue.js"></script>
    <script src="js/vue-router.js"></script>
    <title>Title</title>
</head>
<body>

<div id="app">
    <router-link to="/home">主頁</router-link>
    <router-link to="/user">用戶</router-link>

    <router-view></router-view>
    <button @click="push">添加路由</button>
    <button @click="push">替換路由</button>
</div>

<template id="user">
    <div>
        <h1>用戶信息</h1>
        <ul>
            <li><router-link to="/user/regist/qwe/123">用戶註冊</router-link></li>
            <li><router-link to="/user/login?name=wushi&pass=123">用戶登陸</router-link></li>
        </ul>

        <router-view></router-view>
    </div>




</template>

</body>


<script>
    var home={
        template:'<h1>home</h1>'
    };
    var user={
        template:'#user'
    };

    let login={
        template:'<h1>登陸中....{{$route.query}}</h1>'
    };
    let regist={
        template:"<h1>註冊{{$route.params}}{{$route.path}}</h1>"
    }
    const routes1=[
        {path:'/home',component:home},
        {path:'/user',component:user,
        children:[
            {
            path: 'login',
            component: login,
            },
            {
             path:'regist/:username/:pass',
             component:regist
            }
        ]},
        // {path:'*',redirect:'/home'}
    ];
    const router = new VueRouter({
        routes:routes1,
    });
    new Vue({
        el:'#app',
        router,
        methods:{
            push(){
                router.push({path:'/home'})
            }
        }
    })
</script>



</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。