vue学习笔记之动态路由和get传值

不同路由传值：可以通过动态路由

1.配置动态路由(动态路径参数  以冒号开头)

routes:[ { path: '/content/:aid', component: Content},///:aid此处配置动态路由]

(get):{ path: '/pcontent/', component: Pcontent},

2.在对应的页面

this.$route.params获取动态路由的值

get:  this.$route.query

main.js：
import Vue from 'vue';
import App from './App';

//import VueResource from 'vue-resource';
//Vue.use(VueResource);
import VueRouter from 'vue-router';
Vue.use(VueRouter);

//创建组件
import Home from './components/home.vue';
import News from './components/news.vue';
import Content from './components/Content.vue';
//配置路由
 const routes = [
              { path: '/home', component: Home },
              { path: '/news', component: News },
              { path: '/content/:aid', component: Content},///:aid此处配置动态路由

                            { path: '*', redirect: '/home' }   /*默认跳转路由*/
            ]

//实例化router

const router = new VueRouter({
              routes 

            })

//挂载
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

 

 

Content.vue：

<template>
    <div id="content">
        我是详情组件
    </div>
</template>

<script>
    export default{
        data(){
            return{
                msg:'数据'
            }
        },
        mounted(){
            console.log(this.$route.params);//获取动态路由传值
        }
    }
</script>

news.vue

<template>
    <div id="news">
        我是新闻组件
        <ul>
            <li v-for="(item,key) in list">
                <router-link :to="'/content/' +key"">{{key}}--{{item}}</router-link>
            </li>
        </ul>
    </div>
</template>

<script>;
    export default{
        data(){
            return{
                list:['111','123']
            }
        },
        
    }
</script>

get传值：