vue 路由配置传值及编程式导航

一、路由配置及其模块化封装

1.安装路由

cnpm install vue-router --save

2.创建Router文件夹以及Router.js文件

3.在Router.js中封装路由

//先导入路由
import Vue from 'vue';
import vueRouter from 'vue-router';

//引入组件
import Home from '../Components/Home.vue';
import Cart from '../Components/Cart.vue';
//使用路由
Vue.use(vueRouter);
//配置路由
const routes=[
  {
    path:"/",
    component:Home
  },
  {
    path:"/Cart",
    component:Cart
  }
]
//实例化路由
const router=new vueRouter({
  routes:routes
});
//暴露路由
export default router;  

4.在main.js中配置路由

//导入路由的模块化
import router from './Router/Router.js';
//在vue实例上进行挂载
new Vue({
  el: '#app',
  router,
  render: h => h(App)
})

5.使用路由

在App.vue中使用路由

<template>
  <div id="app">
    <!-- 
      router-view 路由的出口点
      路由的入口
      router-link  to  
     -->
    <router-link to="/" >home</router-link>
    <router-link to="/Cart">Cart</router-link>
    <router-view></router-view>
  </div>
</template>

说明：router-link  路由的入口,被网页解析完为a链接;   to解析完为href 

二、编程式导航

从Home组件跳转News组件

<template>
    <div>
        <p>{{msg}}</p>
        <ul>
            <li>账号：<input type="text" v-model="id"></li>
            <li>密码：<input type="text" v-model="pwd"></li>
            <li><button @click="login">登录</button></li>
        </ul>
    </div>
</template>
<script>
export default {
    data(){
        return{
            msg:"我是home组件",
            id:"",
            pwd:""
        }
    },
    methods:{
        login(){
            let id=this.id;
            let pwd=this.pwd;
            if(id=="10086"&&pwd=="123"){
                //1.直接跳转到News组件
                this.$router.push("News");

                //2.通过路径跳转
                this.$router.push({
                    path:"News"
                });

                //3.通过路径跳转传参
                this.$router.push({
                    name:"newsinfo",
                    params:{id:1}
                });

                this.$router.push({
                    name:"newsinfo",
                    query:{id:1}
                });
            }
        }
    }
}
</script>

三、路由传值 

方式一：固定传值  get方法

• Router.js中路由配置   （只写出关键句子）

{
    path:"/Cart/:id",
    component:Cart
  }

• 在根组件App.vue中点击传值，即路由的入口应写为：

<router-link to="/Cart/2">list</router-link>

• 在Cart组件中取值 

 mounted(){
        let id=this.$route.params.id;
    }

 方式二：动态传值

• Router.js中路由配置

{
    path:"/Cart/:id",
    component:Cart
  }

• 在根组件App.vue中点击传值，data()函数中需要有动态的数据

<template>
 <div id="foot">
     <ul>  
      <li><router-link :to="`/Cart/${uid}`">通讯录</router-link></li> 
     </ul>
 </div>
</template>

<script>
export default {
    name:"foot",
    data(){
        return {
            uid:10
        }
    }
}
</script>

动态绑值一定要写成  :to 

• 在Cart组件中取值 

 mounted(){
        let id=this.$route.params.id;
    }

方式三：query传值

• Router.js中路由配置

{
    path:"/Cart",
    component:Cart
  }

•  在根组件App.vue中点击传值，路由入口

<router-link :to="{'path':'/Cart',query:{id:1}}">Cart</router-link>

采用编程式写法：

this.$router.push({
 path:"/Cart",
 query:{id:1}
})

•  在Cart组件中取值 

 mounted(){
        let id=this.$route.query.id;
    }

注意:传参是this.$router,接收参数是this.$route,这里千万不要搞混！！！

方式四：params传值

• Router.js中路由配置

{
    name:"/Cart",
    component:Cart
  }

•  在根组件App.vue中点击传值，路由入口

<router-link :to="{'name':'/Cart',params:{id:1}}">Cart</router-link>

采用编程式写法：

this.$router.push({
 name:"/Cart",
 params:{id:1}
})

•  在Cart组件中取值 

 mounted(){
        let id=this.$route.params.id;
    }

注意:params传参，push里面只能是 name:'xxxx',不能是path:'/xxx',(query可以是name)因为params只能用name来引入路由，如果这里写成了path，接收参数页面会是undefined！！！

query和params传值二者区别：query相当于get请求，页面跳转的时候，可以在地址栏看到请求参数，而params相当于post请求，参数不会再地址栏中显示