VUE全家桶笔记 (Vue-router)

Vue-router介绍

Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。包含的功能有：

• 嵌套的路由/视图表

• 模块化的、基于组件的路由配置

• 路由参数、查询、通配符

• 基于 Vue.js 过渡系统的视图过渡效果

• 细粒度的导航控制

• 带有自动激活的 CSS class 的链接

• HTML5 历史模式或 hash 模式，在 IE9 中自动降级

• 自定义的滚动条行为

  引用地址:https://router.vuejs.org/zh/

  说白了就是一个单页应用(SPA)可以通过Vue-router切换到不同的"页面"

起步

要想使用Vue-router就得先安装对应的插件然后将组件映射到路由。

安装

1.在生成项目时选择 Manually select features -> Router

2.在已有的项目中使用 npm i vue-router -S 或者 vue add router

！但是注意 命令安装会造成文件覆盖,安装前一定要提交下项目

在main.js中 引入并且使用 Vue.use()进行注册

import VueRouter from 'vue-router'

Vue.use(VueRouter);

基本使用

src -> router -> index.js

import Vue from "vue";
import VueRouter from "vue-router";  //引入vue-router
import Home from "../views/Home.vue"; //引入组件
import About from "../views/About.vue";
Vue.use(VueRouter); //注册

const routes = [
    {
        path: "/",  //路由地址
        component: Home //跳转的目标组件
    },
    {
        path: "/about",
        component: About,
    },
];

const router = new VueRouter({
  mode: "history",
  base: process.env.BASE_URL,
    routes
});

export default router; //抛出router

配置完成后可以使用<router-link to="Home">Home</router-link> 创建跳转的链接 to属性相当于a标签的href属性

<router-view />标签作为路由出口渲染组件

命名路由

在配置路由时可以给路由一个name属性进行动态切换

src -> router -> index.js

const routes = [
    {
        path: "/",
        name: "Home",
        component: Home
    },
    {
        path: "/about",
        name: "About",
        component: About,
    },
];

绑定to属性 {name:'路由中对应的home属性值'}

<router-link :to="{name:'Home'}">Home</router-link>

<router-link :to="{name:'About'}">About</router-link>

这里还要注意下单引号和双引号嵌套问题

动态路由匹配&路由组件复用

在网站中 经常有动态路由的情况 例如 https://space.bilibili.com/16052014 这里的16052014就是一个动态路由，每一个不同的动态路由都会渲染相同组件不同的用户信息。

src -> router -> index.js

import Vue from "vue";
import VueRouter from "vue-router";  
import User from "../views/User"; //新创建的用户组件
Vue.use(VueRouter); 

const routes = [
    {
       /*
        /:id就是动态路由匹配 例如http://xxxxx/user/1
        这里的1就是匹配的:id
      */
      path: "/user/:id",  
      name: "User",
      component: User,
    }
];

const router = new VueRouter({
    mode: "history",
    base: process.env.BASE_URL,
    routes
});

export default router; //抛出router

使用params接收匹配路由 因为可能存在多个使用对象进行接收

<router-link :to="{name:'User',params:{id:1}}">用户1</router-link>

<router-link :to="{name:'User',params:{id:2}}">用户2</router-link>

获取id中的内容与后端进行相对应的数据请求展示不同的数据

src -> views -> User.vue

```javascript

$route是一个对象然后取到params字段然后再取到对应的key

**！注意  当路由参数发生变化时 /user/1 切换到  /user/2时 原来的组件实例会被复用，因为两个路由渲染的是同一个组件，复用高效。**

**但是带来的问题是因为组件是被复用的而不是重新进行渲染这里如果使用生命周期钩子函数会造成一些问题**

出现上述问题可以使用watch监听$route:(to,from) to是到哪里去 from是从哪里来 然后就可以愉快的进行一些操作了 例如ajax请求然后改变视图 （to.params.id）

还有一种方法就是利用导航守卫 beforeRouteUpdate

```javascript
beforeRouteUpdate(to,from,next){
  console.Log(to.params.id);
    //拿到对应去哪里的id就可以在这里发ajax请求了
    
    next(); //注意这里一定要调用下next 否则路由会被阻塞
}
</code></pre>
</blockquote>

<h3>404路由和匹配优先级</h3>

<blockquote>
  有这样一个场景用户输入了网站未定义的路由地址 默认Vue-router会跳转到首页，显然这样是不科学的，我们可以定义一个404路由提示用户你输入的地址不存在。
  
  src -> router -> index.js

<pre><code class="language-javascript line-numbers">import Vue from "vue";
import VueRouter from "vue-router";
import Home from "../views/Home.vue";
import About from "../views/About.vue";
import User from "../views/User";
Vue.use(VueRouter);

const routes = [
      {
        path: "/",
        name: "Home",
        component: Home
      },
      {
        path: "/about",
        name: "About",
        component: About
      },
      {
        path: "/user/:id",
        name: "User",
        component: User
      },
      {
        path: "*",  // *代表通配 也就是上面的路由没有找到会匹配到这里 自然这里就引申出一个优先级的问题
        name: "404",
        component: () => import("../views/404") // 异步组件加载方式 效率更高
      }
];

const router = new VueRouter({
    mode: "history",
    base: process.env.BASE_URL,
    routes
});

export default router;

</code></pre>
  
  <strong>！注意404路由一定要放到路由配置最下方，因为这里存在一个匹配优先级的问题 他会从上往下找 如果404路由放到首位或者中间某一个位置就会造成下方的路由失效</strong>
  
  src -> views -> User.vue
  
  
  ```javascript