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: ''
})

 

 

Content.vue：

news.vue

get传值：