vue中路由传值及编程式导航

• 在Router.js路由中配置并引入、挂载组件：

//引入组件
import Home from '../Components/Home.vue';
import List from '../Components/List.vue';
import News from '../Components/News.vue';

//导入vue
import Vue from 'vue';
//先导入路由
import VueRouter from 'vue-router';
//使用路由
Vue.use(VueRouter);
//配置路由
const routes=[
    {
        path:"/",
        component:Home
    },
    {
        path:"/List",
        component:List
    },
    {
    	name:"newsinfo",
        path:"/News",
        component:News
    }
]
//实例化路由（将配置需挂载给整个路由器）
const router=new VueRouter({
  routes:routes
});
export default router

• 在main.js中导入路由的模块化并进行关联：

import Vue from 'vue'
import App from './App.vue'

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

• 在App.vue根组件里写入路由的入口及出口：

<template>
  <div id="app">
    <router-link to="/">home</router-link>
    <router-link to="/List">list</router-link>
    <router-link to="/News">news</router-link>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'app'
}
</script>

一、vue中路由传值

1. 固定传值

方式1：get传值

• Router.js中配置路由里写为：（path:"/List/:id"）

const routes=[
    {
        path:"/",
        component:Home
    },
    {
        path:"/List/:id",
        component:List
    },
    {
    	name:"newsinfo",
        path:"/News",
        component:News
    }
]

• 在根组件App.vue中点击传值，即路由的入口应写为：（to="/List/2"）

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

• 在该组件List.vue里取值：（this.$route.params）

<template>
    <div>
        <p>{{msg}}</p>
    </div>
</template>
<script>
export default {
    data(){
        return{
            msg:"我是list组件"
        }
    },
    mounted(){
        console.log(this.$route.params.id);
    }
}
</script>

2. 动态传值

方式2：es6模板

• Router.js中配置路由，与方式1一样（path:"/List/:id"）

• 在根组件App.vue中动态传值：（:to="/List/${id} "）

<template>
  <div id="app">
    <router-link to="/">home</router-link>
    <router-link :to="`/List/${id}`">list</router-link>
    <router-link to="/News">news</router-link>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'app',
  data () {
    return {
      id:10
    }
  }
}
</script>

• 在该组件List.vue里取值，与方式1一样（this.$route.params）

方式3：

• Router.js中配置路由里写为：（ path:"/List"）

const routes=[
    {
        path:"/",
        component:Home
    },
    {
        path:"/List",
        component:List
    },
    {
    	name:"newsinfo",
        path:"/News",
        component:News
    }
]

• 在根组件App.vue中点击传值，即路由的入口应写为：（:to="{path:’/List’,query:{id:20}}"）

<router-link :to="{path:'/List',query:{id:20}}">list</router-link>

• 在该组件List.vue里取值：（this.$route.query）

<template>
    <div>
        <p>{{msg}}</p>
    </div>
</template>
<script>
export default {
    data(){
        return{
            msg:"我是list组件"
        }
    },
    mounted(){
        console.log(this.$route.query.id);
    }
}
</script>

方式4：给路由起名称，拿路由的名字去找

• Router.js中配置路由里写为：（name:“listinfo”）

const routes=[
    {
        path:"/",
        component:Home
    },
    {
        name:"listinfo",
        path:"/List",
        component:List
    },
    {
    	name:"newsinfo",
        path:"/News",
        component:News
    }
]

• 在根组件App.vue中点击传值，即路由的入口应写为：（:to="{name:‘listinfo’,query:{id:20}}"）

<router-link :to="{name:'listinfo',query:{id:20}}">list</router-link>

• 在该组件List.vue里取值，与方式3一样：（this.$route.query）

二、路由的编程式导航

例：通过一些判断以js跳转路由，从Home.vue跳转到News.vue

Home.vue：

<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>