Vue-router路由

一、URL的hash

可以通过直接赋值location.hash来改变href, 但是页面不发生刷新

二、HTML5的history模式：pushState

三、HTML5的history模式：replaceState

四、HTML5的history模式：go

五、搭设路由框架

vue-router是Vue.js官方的路由插件，它和vue.js是深度集成的，适合用于构建单页面应用。

1.安装
2.在src文件下创建router文件夹
3.在router文件夹下创建index.js，用来配置所有的路由信息

index.js文件夹下需要做的事：
//配置路由相关的信息

//1.导入路由
import VueRouter from 'vue-router'

//使用
//1.通过Vue.use（插件），安装插件
Vue.use(VueRouter)

//2.创建VueRouter对象
const routes = [
//一个映射关系一个对象,path和component是映射关系
{path:'',
component:
}
]

const router = new VueRouter({
    //配置路由和组件之间的应用关系
    routes
})

//3.将router对象传入到Vue实例
export default router

4.在main.js进行挂载
import router from ‘./router/index’

六、配置路由映射框架

在App.vue写标签，切换路径

注：
1.: 该标签是一个vue-router中已经内置的组件, 它会被渲染成一个标签.
2.: 该标签会根据当前的路径, 动态渲染出不同的组件.
3.网页的其他内容, 比如顶部的标题/导航, 或者底部的一些版权信息等会和处于同一个等级.
4.在路由切换时, 切换的是挂载的组件, 其他内容不会发生改变.

效果为：

七、路由默认路径

目的：让路径默认跳到到首页, 并且渲染首页组件。
操作：

说明：
1.在routes中又配置了一个映射。
2.path配置的是根路径: /。
3.redirect是重定向, 也就是将根路径重定向到/home的路径下。

八、router-link

属性一：to
作用：用于指定跳转的路径。
例 ：

属性二：tag
作用：tag可以指定之后渲染成什么组件, 比如上面的代码会被渲染成一个

• 元素, 而不是
  例：

• 属性三：replace
  作用：replace不会留下history记录, 所以指定replace的情况下, 后退键返回不能返回到上一个页面中

  属性四：active-class
  作用：当对应的路由匹配成功时, 会自动给当前元素设置一个router-link-active的class, 设置active-class可以修 改默认的名称。

  九、动态路由

  1.引入：在某些情况下，一个页面的path路径可能是不确定的，比如进入用户界面时，希望是如下的路径：“/user/aaaa或/user/bbbb”，除了有前面的/user之外，后面还跟上了用户的ID。

  2.定义：path和Component的匹配关系，称为动态路由。

  3.步骤（在页面渲染id信息）：
  （1）index.js中
  
  （2）User.vue中
  方法一：
  
  方法二：

  <div>
    <h2>{{userId}}</h2>
  </div>
  
  <script>
    export default{
  	name:"User",
  	computed:{
  	  userId(){
  	    return this.$route.params.id
  	    //这里的id对应index.js里的user path
  	  }
  	}
    }
  </script>
  

  （3）App.vue中
  
  效果：
  

  十、路由的懒加载

  1.懒加载：
  路由懒加载的主要作用就是将路由对应的组件打包成一个个的js代码块，只有在这个路由被访问到的时候, 才加载对应的组件。即用到时再加载
  懒加载的效果：
  
  2.懒加载的方式

  （1）结合Vue的异步组件和Webpack的代码分析
  
  （2）AMD写法
  
  （3）ES6写法
  

  十一、路由的嵌套

  1.嵌套路由：比如在home页面中, 我们希望通过/home/news和/home/message访问一些内容。一个路径映射一个组件, 访问这两个路径也会分别渲染两个组件。

  2.路径与组件的关系：
  
  3.操作步骤：
  （1）定义两个组件：
  
  （2）index.js中引入：
  

  （3）home.vue中渲染
  
  4.效果：
  
  5.嵌套路由配置默认路径（在index.js中）
  

  十二、参数传递

  • 传递参数主要有两种类型: params和query

  1.params
  配置路由格式: /router/:id
  传递的方式: 在path后面跟上对应的值
  传递后形成的路径: /router/123, /router/abc

  2.query
  配置路由格式: /router, 也就是普通配置
  传递的方式: 对象中使用query的key作为传递方式
  传递后形成的路径: /router?id=123, /router?id=abc

  • url格式
    url：协议//主机：端口号/路径？查询

  十三、$ router 与 $ route

  $ router为VueRouter实例，想要导航到不同URL，则使用$router.push方法
  $ route为当前router跳转对象里面可以获取name、path、query、params等

  十四、导航守卫

  vue-router提供的导航守卫主要用来监听监听路由的进入和离开的.（监听跳转过程）
  目的：点击首页时，title变为首页，点击用户时，title变为用户。
  法一：生命周期函数create（）——>（一旦网页被建立，就执行函数）

  create(){
    document.title = '首页' 
  }
  

  弊端：没个界面都必须声明此函数

  法二：监听路由跳转过程，每次跳转都改title
  （1）前置钩子（监听全局跳转 ——全局导航守卫，跳转前回调）
  步骤1：在钩子当中定义一些标题, 可以利用meta来定义.
  步骤2：利用导航守卫,修改标题.
  例：
  在index.js中，为router添加函数beforeEach

  // 前置守卫(guard)
  router.beforeEach((to, from, next) => {
    // 从from跳转到to钩子三个参数解析：
    //to: 即将要进入的目标的路由对象.
    //from: 当前导航即将要离开的路由对象.
    //next: 调用该方法后, 才能进入下一个钩子.
    //导航
    document.title = to.matched[0].meta.title
    //必须调用next()函数，否则无法跳转
    next()
  })
  

  除此之外，还需在每一个route里添加meta属性

  const routes = [
    {
      path: '',
      // redirect重定向
      redirect: '/home'
    },
    {
      path: '/home',
      component: Home,
      meta: {
        title: '首页'
      },
      children: [
        // {
        //   path: '',
        //   redirect: 'news'
        // },
        {
          path: 'news',
          component: HomeNews
        },
        {
          path: 'message',
          component: HomeMessage
        }
      ]
    },
    {
      path: '/about',
      component: About,
      meta: {
        title: '关于'
      },
      beforeEnter: (to, from, next) => {
        // console.log('about beforeEnter');
        next()
      }
    },
    {
      path: '/user/:id',
      component: User,
      meta: {
        title: '用户'
      },
    },
    {
      path: '/profile',
      component: Profile,
      meta: {
        title: '档案'
      },
    }
  ]
  

  （2）后置钩子（守卫，跳转后回调）
  后置钩子afterEach, 不需要主动调用next()函数.

  // 后置钩子(hook)
  router.afterEach((to, from) => {
    
  })
  
  

  十五、keep-alive

  1.什么是keep-alive
  keep-alive 是 Vue 内置的一个组件，可以使被包含的组件保留状态，或避免重新渲染。

  2.属性
  （1）include
  include - 字符串或正则表达，只有匹配的组件会被缓存。
  （2）exclude
  exclude - 字符串或正则表达式，任何匹配的组件都不会被缓存
  例：

  <keep-alive exclude="Profile,User">
        <router-view/>
  </keep-alive>