您当前的位置： 首页 > 慢生活 > 程序人生 网站首页程序人生

18vue动态路由和get传值

发布时间：2023-04-10 22:32:47编辑：雪饮阅读（）

对于包含get传参的路由，可以有两种，一种就是像是传统的web的get传参以?来开始，另外一个则是可以自定义路由规则。
对于第一种，在定义路由规则时候和普通不传参路由规则无差，但在router-link里面传参时候就要自己拼接问号和参数这些。
对于第二种，在定义路由规则的时候像是pathinfo模式吧，就是在反斜杠后面用冒号接续参数名，然后在router-link的to传参时候则直接把参数冒号及其后面的参数名所在路径位置用实际参数替换。
对于第一种一般的是叫做querySting方式，第二种就是pathinfo方式
那么首先假定我们有一个新闻列表页面，该列表可以进入两个不同的详情页
那么我们的实例
content1.vue
<template>
    <div>我是文章详情页1，本篇文章id是{{aid}}</div>
</template>
<script>
export default{
    data(){
        return {
            aid:null
        }
    },
    mounted(){
        //通过pathinfo方式路由传参的获取参数方法
        this.aid=this.$route.params.aid;
    }
}
</script>
content2.vue
<template>
    <div>我是文章详情页2，本篇文章id是{{aid}}</div>
</template>
<script>
export default{
    data(){
        return {
            aid:null
        }
    },
    mounted(){
        //通过queryString传参方式时的获取参数的方法
        this.aid=this.$route.query.aid;
    }
}
</script>
新闻列表news.vue
<template>
    <div id="news">
        这里是新闻列表页
        <ul>
            <li v-for="item in list">
                <router-link :to="'/news/content1/'+item">新闻编号{{item}}(进入文章详情1页面)</router-link>
                <router-link :to="'/news/content2?aid='+item">新闻编号{{item}}(进入文章详情2页面)</router-link>
            </li>
        </ul>
    </div>
</template>
<script>
export default{
    data(){
        return {
            list:[1,2,3,4,5]
        }
    }
}
</script>
配置两种不同获取传值参数的详情页面路由规则main.js
import Vue from 'vue'
import App from './App.vue'
 
import VueRouter from 'vue-router';
Vue.use(VueRouter);
 
import Index from './components/Index.vue';
import News from './components/news.vue';
import Content1 from './components/content1.vue';
import Content2 from './components/content2.vue';
 
const routes=[
  {path:'/',component:Index},
  {path:'/news',component:News},
   //新闻详情页1
   {path:'/news/content1/:aid',component:Content1},
   //新闻详情页2
   {path:'/news/content2',component:Content2},
  {path:'*',component:Index}
];
const router=new VueRouter({routes})
new Vue({
  el: '#app',
  router,
  render: h => h(App)
})