• vue的路由

    开发步骤

    1. 编写组件
    2. 在index中配置该组件的name，和path等

    作用：

    用于组件的切换。

    组件切换方法：

    一、标签(在temlate中直接使用)

    点击该标签就可以实现跳转

     无参数的跳转

    1. <template>
    2.   <nav>
    3. <--replace代表跳转之后不可以返回 -->
    4.     <router-link to="/home">Homerouter-link> |
    5.     <router-link replace to="/about">Aboutrouter-link>
    6.   nav>
    7.   
    8.   <router-view/>
    9. template>

    带参数跳转

    1. <router-link :to="{name:'User',query:{id:1,name:'zs'}}">userrouter-link>
    2. <router-link :to="{path:'/user',query:{id:1,name:'zs'}}">userrouter-link>
    3. <--to中第一个键值对代表组件地址，或者名字；第二个键值对是参数。key是query -->

     二、router.push(path)，router.peplace(path).(在方法中使用)。

    给某个标签绑定点击事件，就可以点击该标签实现跳转

    无参数的跳转和带参数的跳转

    1.  
    2.   methods:{
    3.     login:function () {
    4.       if(this.loginName=="root"&&this.password=="root"){
    5.         //router.push("/");//不带参数的跳转
    6.         this.$router.push({
    7.           name:"home",         // path:"/home",这里也可以用name
    8.           query:{
    9.             loginName:"root",
    10.           }
    11.         })
    12.         sessionStorage.setItem("loginName","root");
    13.       }else{
    14.         alert("账号或者密码错误！")
    15.       }
    16.  
    17.     }
    18.   }

    获取参数

    方法一：(在temlate中直接使用)

    1.   {{$route.query.id}}
    2.   {{$route.query.name}}

    方法二：在