一、标签形式切换路由
24-router两种传递参数的方式_用户登录

1、queryString形式
（1）在标签的href路径上添加参数
24-router两种传递参数的方式_html_02
（2）在组件中拿值
24-router两种传递参数的方式_传递参数_03

2、restful形式
（1）修改path
24-router两种传递参数的方式_用户登录_04
（2）在标签的href路径上添加参数
24-router两种传递参数的方式_用户登录_05
（3）在组件中取值
24-router两种传递参数的方式_html_06

二、router-link形式切换路由
1、queryString形式：直接在一的基础上修改a标签为router-link
24-router两种传递参数的方式_传递参数_07

2、restful形式
24-router两种传递参数的方式_取值_08


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <!--
        标签形式切换路由：
            地址栏传递参数的两种方式：
                1、queryString ？xxx=aaa&yyy=bbb    this.$router.query.key
                2、restful   路径传递参数 /xx/21      this.$route.params.key
    -->
    <div id="app">
        <a href="#/login?name=xiaochen&password=123">用户登录</a>
        <a href="#/regist/21/xiaochen">用户注册</a>

        <hr>

        <router-link to="/login?name=xiaobai&password=1234">用户登录</router-link>
        <router-link :to="{path:'/login?name=小明&password=1234'}">用户登录</router-link>
        <router-link :to="{path:'/login', query:{name:'zhangsan', password:123456}}">用户登录</router-link>
        <router-link :to="{name:'Login', query:{name:'lisi', password:123456}}">用户登录</router-link>  <!--命名的方式，就必须用query对象的方式取值-->


        <hr>

        <router-link :to="{path:'/regist/22/xiaojindou'}">用户注册</router-link>
        <router-link :to="{name:'Regist', params:{id:22, name:'wangwu'}}">用户注册</router-link>

        <router-view></router-view>
    </div>
</body>
</html>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<!--路由cdn-->
<script src="https://unpkg.com/vue-router/dist/vue-router.js "></script>
<script>
    const login = {
        template: `<div><h3>用户登录</h3></div>`,
        created(){ //声明周期 在执行已经组件内部事件和声明周期函数注册  自身data methods computed属性注入和校验
            console.log(this.$route);//获取当前路由对象
            console.log(this.$route.query.name);
            console.log(this.$route.query.password);
        }
    };

    const regist = {
        template: `<div><h3>用户注册</h3></div>`,
        created(){
            console.log(this.$route.params.id)
            console.log(this.$route.params.name)
        }
    };

    const router = new VueRouter({
        routes:[
            {path:'/login', component:login, name:'Login'},
            {path: '/regist/:id/:name', component:regist, name: 'Regist'}
        ]
    });


    const app = new Vue({
        el: "#app",
        data:{},
        methods:{},
        components:{
            login,
            regist
        },
        router:router
    });
</script>