路由传参
先配置好路由
在父组件种添加
<template>
<div class="footer_wrap">
<!-- 头部点击-->
<div>
<router-link to="/practice1">点击测试1</router-link>
<router-link to="/practice2">点击测试2</router-link>
<router-link to="/practice3">点击测试3</router-link>
<router-link to="/practice4">点击测试4</router-link>
</div>
<br>
<!-- 点击对应路由组件显示-->
<router-view></router-view>
</div>
</template>
<script>
export default {
}
</script>
<style scoped>
.router-link-exact-active {
background: #0dcaf0!important;
}
.footer_wrap a {
flex: 1;
text-decoration: none;
padding: 20px 0;
line-height: 20px;
background-color: #333;
color: #ccc;
border: 1px solid black;
}
</style>
创建4个路由组件，点击的时候进行展示（路由组件中填写内容，便于区分）
配置对应路由的js文件
import Vue from "vue";
import VueRouter from "vue-router";
import practice1 from "@/views/practice1";
import practice2 from "@/views/practice2";
import practice3 from "@/views/practice3";
import practice4 from "@/views/practice4";
Vue.use(VueRouter)
const router = new VueRouter({
routes : [
{path:"/practice1",component:practice1},
{path:"/practice2",component:practice2},
{path:"/practice3",component:practice3},
{path:"/practice4",component:practice4}
]
})
export default router
在mian.js中进行引入对应封装的路由配置进行引入
import Vue from 'vue'
import App from './04-路由传参'
// 切换到practice路由封装包上边
import router from "@/router/practice";
Vue.config.productionTip = false
new Vue({
router,
render: h => h(App),
}).$mount('#app')
开始传参
路由传参，有几种方式？两种
第一种方式query传参，父组件进行参数传递 /（传递链接）?传递的参数名=我们传递的参数 子组件进行接收$route.quer.传递的参数名
第二种方式params（路径传参）
1，路由规则里面提供占位符/:id/:name.../链接地址/:id/:name
2，在主组件种传递参数 /链接/（传递的参数1，对应:id）/（传递的参数2，对应:name）
3，接收参数，$route.params.id $route.params.name，进行id参数和name参数进行接收
使用query传参
父组件中写入传递的参数
<router-link to="/practice1?name=学而时习之">点击测试1</router-link>
然后去组件practice1路由组件进行接收
<template>
<div>
练习1 <br>
{{this.$route.query.name}}
</div>
</template>
<script>
export default {
name: "practice1",
mounted() {
console.log(this.$route) //使用this.$route获取路由传递的参数
console.log(this.$route.query.name) //拿到传递的参数
}
}
</script>
使用params进行传参（路径传参）需要修改路由配置
1，路由规则里面提供占位符/:id/:name.../链接地址/:id/:name
2，在主组件种传递参数 /链接/（传递的参数1，对应:id）/（传递的参数2，对应:name）
3，接收参数，$route.params.id $route.params.name，进行id参数和name参数进行接收
首先我们在主页面进行参数传递
<router-link to="/practice2/王路飞/时不我待">点击测试2</router-link>
然后添加路由上的占位符
import Vue from "vue";
import VueRouter from "vue-router";
import practice1 from "@/views/practice1";
import practice2 from "@/views/practice2";
import practice3 from "@/views/practice3";
import practice4 from "@/views/practice4";
Vue.use(VueRouter)
const router = new VueRouter({
routes : [
{path:"/practice1",component:practice1},
{path:"/practice2/:id/:name",component:practice2},
{path:"/practice3",component:practice3},
{path:"/practice4",component:practice4}
]
})
export default router
最后practice2页面进行渲染
<template>
<div>
练习2 <br>
{{$route.params.id}}
{{$route.params.name}}
</div>
</template>
<script>
export default {
name: "practice2",
mounted() {
console.log(this.$route) //获取传递参数的位置
console.log(this.$route.params.id) //获取到id的参数
console.log(this.$route.params.name) //获取到name的参数
}
}
</script>
路由的重定向和模式
路由重定向
什么是重定向，当用户输入指定URl路径的时候，我们重定向到指定的路径，我们定向的为这个URL进行页面指定，不用输入hash值后边的数字
如何使用重定向，我们在路由规则的routes中添加一个新的对象
path后边指定访问的路径，（也就是URL输出的路径），指定的路径也就是我们vue启动时候的路径，没有后边的哈希值
const router = new VueRouter({
routes : [
{path:"/practice1",component:practice1},
{path:"/practice2/:id/:name",component:practice2},
{path:"/practice3",component:practice3},
{path:"/practice4",component:practice4},
/**
* 1，（2）路由-重定向和模式，命中指定路径的时候，我们重定向到指定的路径
* 2，在routes中添加一个新的对象
* 3，path 后边指定访问的路径（也就是URL输出的路径），指定的路径http://localhost:8080/（没有哈希值）
* 4，我们定向到指定的页面，当输入这个URL进行这个页面访问
*/
{path:"/",component:practice1}
]
})
路由设置页面404（配置路由）
1，404页面，我们要新创建一个404的路由组件，（也就是404的时候展示的页面）
2，在routes中添加一个新对象
3，path : ' * '，匹配所有的路径
4，当所有的路径匹配不上的时候，展示404的路由组件
import NotFound from "@/views/NotFound";
const router = new VueRouter({ routes : [ {path:"/practice1",component:practice1}, {path:"/practice2/:id/:name",component:practice2}, {path:"/practice3",component:practice3}, {path:"/practice4",component:practice4}, {path:"/",component:practice1}, /** * 1,404页面，新建一个NotFound路由组件（也就是404的时候展示的页面） * 2,在routes中添加一个新对象 * 3，path:'*'，匹配所有的路径 * 4，当所有路径匹配不上的时候，展示NotFound路由组件 */ {path:"*",component:NotFound} ] })
配置路由的模式
配置路由模式，默认是hash模式，我们配置成history模式
两个模式的区别hash模式URL上边是有一个#号，后边跟上hash值，但是history模式后边是没有#号的
如何配置，还是在配置路由的地方，中添加mode：样式这样就可以了，不要添加routs里边，放在外边
路由编程式导航
vue路由编程式导航
通过js事件进行跳转到其他页面，我们在practice3和practice4中创建一个点击事件，跳转到practice1链接中
声明式导航：通过a链接进行页面的转跳，也就是URl对应一个路由组件
编程式导航：通过js事件跳转，通过js事件跳转到对应的URL链接上
编程式导航也有两种办法进行转跳，使用path和URL指定名称进行跳转
1，使用path进行指定页面的跳转
（1）在practice3中添加一个点击事件，进行跳转
（2）在点击按钮中添加this.$router.push({path : '/practice1' (转跳到的页面)})) 进行跳转
2，使用name值进行转跳，需要到路由中进行配置
（1）在practice4添加一个点击事件，然后去路由中配置。给需要转跳到的页面，后边添加name的值
（2）在practice4的点击事件中添加，this.$router.push({name : '（添加的name值）'})
使用path进行指定页面的跳转，在practice3中进行按钮声明
<template>
<div>
练习3 <br>
<button @click="dian">点我转跳测试1页面</button>
</div>
</template>
<script>
export default {
name: "practice3",
methods : {
dian () {
this.$router.push({
path : '/practice1' //进行转跳的页面
})
}
}
}
</script>
<style scoped>
</style>
使用name进行指定页面的跳转，在practice4中进行按钮声明，然后配置对应URL的name
我们先去practice4中添加点击事件
<template>
<div>
练习4 <br>
<button @click="dian">点我转跳测试1页面</button>
</div>
</template>
<script>
export default {
name: "practice4",
methods : {
dian () {
this.$router.push({
name : "toPractice1"
})
}
}
}
</script>
<style scoped>
</style>
然后去修改路由配置
routes : [
{path:"/practice1",component:practice1,name:"toPractice1"},
{path:"/practice2/:id/:name",component:practice2},
{path:"/practice3",component:practice3},
{path:"/practice4",component:practice4},
{path:"/",component:practice1},
{path:"*",component:NotFound}
]
编程式传参
编程式导航传参，practice3页面的点击事件，对practice1页面进行传参，触发点击事件的时候进行传参
编程式导航传参也有两周方式：1，query传参；2，params配置项传参
1，query传参
（1）再点击事件中添加：this.$router.push(path:'/practice1',query:{useName:`红发香克斯`})
当我们点击按钮的时候，进行转跳和传递参数
（2）在practice1中添加{{this.query.usrName}}进行接收
2，params配置项传参，参数不会出现在URL上；支支持name；刷新丢失；接收使用$route.params
（1）因为只支持编程式导航的name属性，所以我们写在practice4上，practice3上进行测试
（2）在点击事件中添加，this.$router.push({name:`toPractice1`,params:{useName:`小丑皇巴基`}})
（3）在practice1中添加，{{$route.params.useName}}，进行接收
编程式query传参
我们先在practice3进行传参
<template>
<div>
练习3 <br>
<button @click="dian">点我转跳测试1页面</button>
</div>
</template>
<script>
export default {
name: "practice3",
methods : {
dian () {
this.$router.push({
path : '/practice1', //进行转跳的页面
query:{useName:`红发香克斯`} //进行传递参数
})
}
}
}
</script>
<style scoped>
</style>
在practice1中进行接收
{{this.$route.query.useName}}
编程式params配置项传参
先去practice4中进行传参
<template>
<div>
练习4 <br>
<button @click="dian">点我转跳测试1页面</button>
</div>
</template>
<script>
export default {
name: "practice4",
methods : {
dian () {
this.$router.push({
name : "toPractice1",
params : {useName:`小丑皇巴基`}
})
}
}
}
</script>
<style scoped>
</style>
然后去practice1中进行参数接收
{{this.$route.params.useName}}
测试使用params在path中进行传参
methods : {
dian () {
this.$router.push({
path : '/practice1', //进行转跳的页面
// query:{useName:`红发香克斯`} //进行传递参数
// 我们的practice3使用的是path进行页面转跳的
params : {useName:`红发香克斯`} //我们使用params进行传参
})
}
}
{{this.$route.params.useName}}
这里是拿不到获取的值的，因为path使用的URl后边进行拼接的，但是使用params后边没有拼接，所以页面也拿不到数据
标签：传参,name,编程,component,practice1,path,路由 From： https://www.cnblogs.com/hgng/p/17044798.html