Vue路由规则中定义参数

Vue使用routerLinke定义参数的时候  路由规则中不需要更改任何属性。

 

路由其实就是我们在html中定义的锚点，点击这个连接跳转一个锚点。vue中的路由也是这个原理，

前提是路由必须创建在实例之前。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./lib/vue-2.4.0.js"></script>
    <script src="./lib/vue-router-3.0.1.js"></script>
</head>
<body>

    <div class="app">
        <h1>{{msg}}</h1>
    <!-- 如果在路由中，使用 查询字符串，给路由传递参数，则 不需要修改 路由规则的 path 属性 -->
        <router-link to="log?user=duwei&pass=123456">登录</router-link>
        <router-link to="zhuce">注册</router-link>
        <router-view></router-view>
    </div>
    
<script>

    var log={
        template:'<h1>登录界面------{{$route.query.user}}</h1>',
        created() {
            // 组件的生命周期钩子函数
            // console.log(this.$route)
            // console.log(this.$route.query.id)
            // 这里的this指向的是vm实例对象
            console.log(this.$route.query.user);
            
        },
    }

    var zhuce={
        template:"<h1>注册界面</h1>"
    }

    var router= new VueRouter({
        routes:[
            {path:"/log",component:log},
            {path:"/zhuce",component:zhuce},
            {path:'/',redirect:'/zhuce'}   //当进入界面的时候，默认显示注册界面，redirect 是string类型的
        ],
    })



    var vm=new Vue({
        el:'.app',
        data:{
            msg:'sdfsdfsdf'
        },
        router:router
    })




</script>

</body>
</html>

 

 

路由规则中定义参数2

　　

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./lib/vue-2.4.0.js"></script>
    <script src="./lib/vue-router-3.0.1.js"></script>
</head>
<body>

    <div class="app">
        <h1>{{msg}}</h1>
    <!-- 如果在路由中，参数传递值的时候，需要修改path中的属性值 -->
        <router-link to="/log/duwei/123456">登录</router-link>
        <router-link to="/zhuce">注册</router-link>
        <router-view></router-view>
    </div>
    
<script>

    var log={
        template:'<h1>登录界面------{{$route.params.user}}----{{$route.params.id}}</h1>',
        created() {
            // 组件的生命周期钩子函数
            // console.log(this.$route)
            // console.log(this.$route.query.id)
            // 这里的this指向的是vm实例对象
            console.log(this.$route.params.user);
            
        },
    }

    var zhuce={
        template:"<h1>注册界面</h1>"
    }

    var router= new VueRouter({
        routes:[
            // /:user和/:pass  相当与占位符
            {path:"/log/:user/:id",component:log},
            {path:"/zhuce",component:zhuce},
            {path:'/',redirect:'/zhuce'}   //当进入界面的时候，默认显示注册界面，redirect 是string类型的
        ],
    })



    var vm=new Vue({
        el:'.app',
        data:{
            msg:'sdfsdfsdf'
        },
        router:router
    })

 

posted @ 2019-10-24 09:41  WhiteSpace  阅读(6554)  评论(0)  编辑  收藏  举报