七，Vue Router

1. 路由的概念

2. 认识vue-router

• 目前前端流行的三大前端框架都有自己的路由实现：
  • Angular的ngRouter
  • React的ReactRouter
  • Vue的vue-router
• vue-router是Vue.js官方的路由插件，它和vue.js是深度集成的，适合用于构建单页面应用
• vue-router是基于路由和组件的
  • 路由用于设定访问路径, 将路径和组件映射起来
  • 在vue-router的单页面应用中, 页面的路径的改变就是组件的切换

3. 安装和使用vue-router

• 安装vue-router

  npm install vue-router --save
  

• 安装步骤和使用步骤

  1. 导入路由对象，并且调用Vue.use()

  2. 创建路由实例，并且传入路由映射配置

  3. 在Vue实例中挂载创建的路由实例

     index.js

  import Vue from 'vue'
  import VueRouter from 'vue-router'
  
  //2.通过Vue.user(插件)，安装插件
  Vue.use(VueRouter)
  
  //3.定义路由
  const routes = [
    
  ]
  
  //创建 路由实例
  const router = new VueRouter({
    //配置路由和组件之间的关系
    routes,
    mode:'history'
  })
  
  //将对象导出
  export default router
  
  

  main.js

  //挂载
  import router from './router'
  
  new Vue({
    el: '#app',
    router,
    render: h => h(App)
  })
  
  

• 使用

  1. 创建路由组件
  2. 配置路由映射: 组件和路径映射关系
  3. 使用路由: 通过和

• 具体步骤如下

1. 创建路由实例
   
   2.挂载到vue实例中
   3.创建路由组件
   
   4.配置组件和路径的映射关系
   
   5.使用路由
   

4. 路由的默认路径

• 默认的情况下，我们一般都是进入网站的首页，我们希望可以渲染首页的内容

• 但是在我们的实现中，默认没有显示首页的组件，需要点击才行
  

• 实现这种需求，只需要多配置一个路径映射即可

5. Html5的History模式

6.router-link属性

• to 用于指定跳转的路径.
• tag tag可以指定之后渲染成什么组件, 比如上面的代码会被渲染成一个
• 元素, 而不是
• replace replace不会留下history记录, 所以指定replace的情况下, 后退键返回不能返回到上一个页面中
• active-class 当对应的路由匹配成功时, 会自动给当前元素设置一个router-link-active的class, 设置active-class可以修改默认的名称.

7.路由代码跳转的第二种方式

• 通过router-link中的to属性，我们可以实现页面跳转
• 实现跳转，我们还可以通过JavaScript代码跳转

<button @click="userLink">用户</button>


	userLink(){
      this.$router.push('/user/'+this.userId)
    }

8.动态路由

• 在某些情况下，一个页面的path路径是不确定的，后面可能还更上了用户的ID，这种匹配关系我们称之为动态路由

9. 嵌套路由

• 嵌套路由是一个很常见的功能
  • 比如在home页面中, 我们希望通过/home/news和/home/message访问一些内容.
  • 一个路径映射一个组件, 访问这两个路径也会分别渲染两个组件.
• 创建对应的子组件, 并且在路由映射中配置对应的子路由
• 在组件内部使用标签.

{
    path:'/home',
    component:Home,
    meta:{
      title:'首页'
    },
    children:[
      {
        path:'',
        redirect: 'news'
      },
      {
        path:'news',
        component:HomeNews
      },
      {
        path:'messages',
        component:HomeMessages
      }
    ]
  },

<template>
  <div>
    <h2>我是首页</h2>
    <p>我是首页，嘿嘿嘿</p>
    <router-link to="/home/news">新闻</router-link>
    <router-link to="/home/messages">消息</router-link>
    <RouterView/>
  </div>
</template>

<script>
    export default {
        name: "Home",
    }
</script>

<style scoped>

</style>