前些天发现了一个巨牛的人工智能学习网站，通俗易懂，风趣幽默，忍不住分享一下给大家。[[点击跳转到网站。]]
创建文件目录
在router文件中引入一级路由以及详情页路由
import Vue from "vue";
import VueRouter from "vue-router";
import Home from "../views/home/Home.vue";
import About from "../views/about/About.vue";
import Detail from "../views/home/detail.vue";
import Detail1 from "../views/about/detail1.vue"
Vue.use(VueRouter);
const routes = [
{
path: "/",
name: "Home",
component: Home,
alias:"/home"
},
{
path: "/about",
name: "About",
component: About,
},
//url传值方式
{
path:"/detail/:name",
name:"detail",
component:Detail
},
// get传值方式
{
path:"/detail",
name:"detail",
component:Detail1
}
];
const router = new VueRouter({
mode: "history",
base: process.env.BASE_URL,
routes,
});
export default router;
在根组件配置俩个一级路由
app.vue
<template>
<div id="app">
<div id="nav">
<router-link to="/">url方式</router-link> |
<router-link to="/about">get方式</router-link>
</div>
<router-view />
</div>
</template>
第一种使用url进行动态传值
配置路由
routes:[
{
path:'/detail',component:Detail}
]
在跳转页面放值
<router-link:to="'/detail/'+key"><router-link>
在对应页面获取,一般写在生命周期函数中
console.log(this.$route.params);
代码示例
Home组件
<template>
<!-- 所有的内容要被根节点包含起来 -->
<div>
<div id="home">我是首页组件</div>
<ul>
<li v-for="(item, key) in list" :key="item.id">
<router-link :to="'/detail/' + key">{
{
key }}--{
{
item }}</router-link
><!--动态路由第一种写法-->
</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
msg: "我是一个home组件",
list: ["商品111111", "商品222222", "商品333333"],
};
},
};
</script>
url传值详情页使用this.$route.params获取动态路由信息
detail组件
<template>
<div id="content">我是使用url传值的详情页面{
{
msg.name }}</div>
</template>
<script>
export default {
data() {
return {
msg: "数据",
};
},
mounted() {
this.msg = this.$route.params;
console.log(this.$route.params); /*获取动态路由传值*/
},
};
</script>
第二种使用get进行动态传值
配置路由
routes:[
{
path:'/detail/:name',component:Detail}
]
在跳转页面放值
<router-link:to="'/detail?name='+key"><router-link>
在对应页面获取,一般写在生命周期函数中
console.log(this.$route.query);
代码示例
About组件
<template>
<!-- 所有的内容要被根节点包含起来 -->
<div>
<div id="home">我是首页组件</div>
<ul>
<li v-for="(item, key) in list" :key="item.id">
<router-link :to="'/detail?name=' + key"
>{
{
key }}--{
{
item }}</router-link
><!--动态路由第一种写法-->
</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
msg: "我是一个home组件",
list: ["商品111111", "商品222222", "商品333333"],
};
},
};
</script>
get传值详情页使用this.$route.query获取动态路由信息
detail1组件
<template>
<div id="content">我是使用get传值的详情页面{
{
msg.name }}</div>
</template>
<script>
export default {
data() {
return {
msg: "数据",
};
},
mounted() {
this.msg = this.$route.query;
console.log(this.$route.query); /*获取动态路由传值*/
},
};
</script>