欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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

程序员文章站 2022-03-10 18:12:41
...

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

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请求,参数不会再地址栏中显示

相关标签: 路由