Vue-router (①两种路由模式、②编程式/组件式、③如何传参(优缺点))

Vue-router (①两种路由模式、②编程式/组件式、如何传参(优缺点))

---

Vue路由：

路由的基础用法：

1 .安装
 npm install vue-router --save
2 .main.js中
//Vue路由：引入
import VueRouter from 'vue-router'
Vue.use(VueRouter)
 
//Vue路由：引入并创建组件
import BYHome from './components/BYHome.vue'
import BYNews from './components/BYNews.vue'
import HelloWorld from './components/HelloWorld.vue'
 
//Vue路由：配置路由
const routes = [
  {path: '/home', component: BYHome},
  {path: '/news', component: BYNews},
  {path: '/helloworld', component: HelloWorld},
  {path: '*', redirect: '/home'} /*默认跳转路由 */
]
 
//Vue路由：实例化VueRouter 
const router = new VueRouter({
  routes //缩写，相当于 routes:routes
})
 
new Vue({
  router, //Vue路由：挂载路由
  render: h => h(App),
}).$mount('#app')
 
//Vue路由：根组件的模板里面放上下面这句话，需要在App.vue 中配置路由出口：路由匹配到的组件将渲染在根组件App.vue中
<router-view></router-view>
 
//路由跳转
<router-link to="/home">首页</router-link>  
<router-link to="/news">新闻</router-link>
<router-link to="/helloworld">helloWorld</router-link>

Vue路由配置的抽出:

 (1)安装：

 npm install vue-router --save

 (2)创建router.js文件，在该文件中配置路由并暴露出去

import Vue from 'vue';
  //Vue路由：引入
    import VueRouter from 'vue-router'
    Vue.use(VueRouter)
 
    //Vue路由：引入并创建组件
    import BYHome from '../BYHome.vue'
    import BYNews from '../BYNews.vue'
    import HelloWorld from '../HelloWorld.vue'
 
    //Vue路由：配置路由
    const routes = [
      {path: '/home&