vue-router配置笔记

路由的配置

    1.安装 npm install vue-router --save
    2.引入并Vue.use(VueRouter)        //在main.js中
      import VueRouter from 'vue-router'
      Vue.use(VueRouter)
    3.配置路由
      1.创建组件 引入组件
      2.定义路由 
    const router = [
        {path:'/home',component : home},
        {path:'/news',component : news},
        {path:'*',redirect : /home}     //默认跳转路由
    ]
4.实例化VueRouter
    const router = new VueRouter({
        routes
    })
5.挂载
    new Vue({
        el:"#app",
        router,
        render:h =>h(app)
    })
6.<router-view></router-view> 放在App.vue 

二、动态路由传参
1.配置动态路由

  routes:[
      //动态路径参数，以冒号开头
      {path:'/content/:id',component:content}
  ]

2.在对应的页面

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

三、get传值

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