vue-router 路由组件

vue-router 的本质是: 第三方包

使用步骤:

//1. 下载   yarn add [email protected]

 2.main.js  引入vue-reuter

import VueRouter from 'vue-router'
import { find } from 'core-js/core/array'

//3. 注册全局组件(使用插件)
Vue.use(VueRouter)

//4.规则数组
const routes = [
  {
    path: '/find',
    computed: find,
  },
  {
    path: '/my',
    computed: My,
  },
  {
    path: '/part',
    computed: Part,
  },
]

//5.生成路由对象
const router = new VueRouter({
  rroutes,
})
Vue.config.productionTip = false

//6.关联到vue实例
new Vue({
  router,
  render: (h) => h(App),
}).$mount('#app')


App-----
标签
  <router-view></router-view>

声明式传值:

方式1:
查询字符串

传: to="/part?参数名=值

接收: $ $route.query.参数名

方式2:
路径传参

App-----

路由规则path上定义 /path/:参数名


main.js-------  

 {
    path: '/part/:username',  //username对应 App后面的参数名
    component: Part,
  },


接收 :  $ $route.params.参数名