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请求,参数不会再地址栏中显示
上一篇: C# xml反序列化的代码示例详情介绍