Vue如何设置路由以及如何动态路由和get传值

1.安装

npm install vue-router  --save   / cnpm install vue-router  --save

2.在main.js里边引入并 Vue.use(VueRouter)

import App from './App.vue'; //根组件
import VueResource from 'vue-resource';



Vue.use(VueRouter);

3.配置路由

       1创建组件 引入组件

import Home from './component/Home1.vue';
import News from './component/News.vue';
import content from './component/Content.vue';
import product from './component/Product.vue';

      2定义路由  

     path配置组件路径

  const routes=[
    {path: '/home',component:Home},
    {path: '/news',component:News},
    {path: '/content/:aid',component:content},//设置动态路由
    {path: '/product',component:product},
    {path:'*',redirect:'/home'} //设置默认路由
  ]

    3实例化VueRouter

const router =new VueRouter({
  routes

})

  4挂载

new Vue({
  el: '#app',
  router,
  render: h => h(App)
})

5.根组件App.vue的模板里面放上<router-view></router-view>  

<template>
  <div id="app">
    <router-link to="/home">首页</router-link>
    <router-link to="/news">新闻</router-link>
    <hr>
    <router-view></router-view>
    
  </div>
</template>

<script>
export default {

}
</script>

<style>

</style>

6.实现路由跳转

<router-link to="/home">首页</router-link>
<router-link to="/news">新闻</router-link>

动态路由配置

<template>
  <div id="News">
    <h2>我是一个新闻组件</h2>
    <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{
                msg:'我是一个news组件',
                title:"",
                list:['1111','2222','3333','4444']
            }
        },

}

动态路由获取参数

<template>
    <div id='content'>
        <h2>详细内容</h2>
    </div>
</template>

<script>
export default {
    data() {
        return {
          msg:'',  
        }
    },mounted() {
        console.log(this.$route.params);
        //获取参数
    },    
}
</script>

get传值

    <ul>
        <li v-for="(item,key) in list">
           <router-link :to="'/product?aid='+key">{{key}}--{{item}}</router-link>
        </li>
    </ul>

<template>
    <div id='content'>
        <h2>内容</h2>
    </div>
</template>

<script>
export default {
    data() {
        return {
          msg:'',  
        }
    },mounted() {
        console.log(this.$route.query);
    },    
}
</script>