vue-router入门

1. 安装

终端输入vue ui，启动官方的管理页面，确认左上角的项目是当前项目，然后点击plugins，点击右上角添加vue-router

2. 配置

安装结束后，项目会增加一个router文件夹,router/index.js就是配置文件。还会增加一个views文件夹，里边有home.vue和about.vue，这是两个样例。还会改变app.vue的代码，这个你可以手动改回来。 下面配置index.js。 这里url的匹配规则，需要path，name，component，三个属性。 path是路径匹配属性，一级规则，path需要/开头 name随便起，一般跟组件名重名，但要注意保持唯一 component自然是import的组件名。 children是子匹配规则集合，通过这个属性，形成嵌套路由，也很好理解。

import Vue from 'vue'
import VueRouter from 'vue-router'
import HomePage from '../views/HomePage.vue'
import LoginPage from '../views/LoginPage.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'HomePage',
    component: HomePage
  },
  {
    path: '/about',
    name: 'About',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
  },
  {
    path: '/login',
    name: 'LoginPage',
    component: LoginPage,
    children: [
      {
        path: 'company',
        name: 'CompanyAbout',
        component: HomePage
      }
    ]
  }
]

const router = new VueRouter({
  routes
})

export default router

3. router-view标签

router-view是路由组件插入的位置。vue-router内部的工作逻辑是：在当前级别的页面找router-view标签然后去对应级别的路由配置中找匹配规则， 例如某网站首页是http://123.123.123.123:8080。 如果我访问url(http://123.123.123.123:8080),会显示一个根页面，如果根页面里有router-view，则系统会在一级规则里也就是上图的（/ /about /login）中找匹配的
如果我访问url(http://123.123.123.123:8080/login/company),系统会找http://123.123.123.123:8080/login页面中router-view，然后在二级规则也就是/login规则的children里找匹配的
可能使用一段时间后你会发现一个问题：如果一个页面中有两个以上router-view标签怎么办？ 这时候需要增加name属性进行区分。 https://www.cnblogs.com/yingyigongzi/p/10827156.html 这里讲的很明白

4. router-link

我们配置了规则，也配置了页面插入路径，那么如果触发页面变化呢 https://www.cnblogs.com/bydzhangxiaowei/p/12000458.html 这里讲的很明白 在js代码里使用this.$router.push 在template模板中，将a标签替换为router-link标签

<router-link></router-link>

5. this.$route.query 和 this.$route.params

接收上面push的参数。具体可以看这篇blog https://blog.csdn.net/weixin_44867717/article/details/109773945

6. vue中$router和$route的区别

https://blog.csdn.net/benben513624/article/details/86657492