vue-router路由

1.1 什么是路由？

路由是切换页面的一种机制，表现出来就是通过不同的网页地址，显示出不同的页面内容

官方网站：https://router.vuejs.org/

1.2 安装vue-router

在创建项目时，选择安装 Router 选项，就自动安装上了vue-router，并且还自动配置好了路由示例

src/router/ 核心路由模块

src/views/ 路由组件（页面组件）存储位置

1.3 配置使用路由【重点】

1. 建

   创建页面组件，取名大驼峰命名法，两个单词以上

   新闻组件 @/views/NewsView.vue

2. 配

   配置路由线路，引入路由组件，编写线路

import NewsView from '@/views/NewsView.vue'

{
    path: '/news',
    component: NewsView,
}

3. 出

在App.vue里面配置路由出口

<router-view/>

4. 导航（可选）

在App.vue里面添加导航连接

<router-link to="/news">新闻中心</router-link>

1.4 路由嵌套（二级路由）【重点】

1. 建

   建立路由组件，用于二级路由

   News1.vue News2.vue News3.vue

2. 配

   配置二级路由，需要在一级路由中添加 children，二级路由的配置与一级路由一样

{
    path: '/news',
    component: NewsView,
    //配置二级路由
    children: [
         { path: '/news/news1', component: News1 },
         { path: '/news/news2', component: News2 },
         { path: '/news/news3', component: News3 },
    ]
}

3. 出

在一级路由的组件中编写二级路由的出口

NewsView.vue 中添加 News1.vue 的出口

<template>
    <div>
        <h1>新闻中心</h1>

        <!-- 添加二级路由导航 -->
        <nav>
            <router-link to="/news/news1">公司新闻</router-link> |
            <router-link to="/news/news2">行业动态</router-link> |
            <router-link to="/news/news3">技术文库</router-link>
        </nav>

        <!-- 二级路由的出口，在一级路由中编写 -->
        <router-view></router-view>
    </div>
</template>

4. 导航（可选）

在一级路由的组件中编写二级路由的导航

1.5 默认路由

在进入一级路由时，默认显示一个二级路由的组件内容，就是默认路由

方式一：不写二级路由地址，就是默认路由

 {
    path: '/news',
    component: NewsView,
    //配置二级路由
    children: [
      { path: '', component: News1 }, //默认路由
      { path: '/news/news2', component: News2 },
      { path: '/news/news3', component: News3 },
    ]
  }

方式二：访问一级路由时，自动跳转到二级路由

  {
    path: '/news',
    redirect: '/news/news1', //访问一级路由时自动跳转到二级路由
    component: NewsView,
    //配置二级路由
    children: [
      { path: '/news/news1', component: News1 },
      { path: '/news/news2', component: News2 },
      { path: '/news/news3', component: News3 },
    ]
  }

1.6 路由模式

路由模式有三种，分别是：abstract, history, hash

const router = new VueRouter({
  //路由模式
  //mode: "abstract", //地址栏不变，隐藏路径
  //mode: "history", //地址栏显示一个完整的URL地址，没有#
  mode: 'hash', //【推荐】在地址栏以#显示路由地址
  routes
})

1.7 路由传参【重点】

1.7.1 query方式传参数【推荐】

传参数：

//在连接上写参数
<router-link to="/about?username=张三疯&age=18">公司介绍</router-link>

//在事件处理函数中跳转时传参数
this.$router.push('/about?username=李四爷')

//以配置对象的方式传参数
this.$router.push({
    path:'/about',
    query:{
        id:10,
        username:'王小五',
    }
})

接收参数：

created(){
    console.log('接收到的数据是：', this.$route.query)
},

1.7.2 params传递参数

传参数：

this.$router.push({
    name:'about',
    params:{
        id:20,
        username:'张无忌',
    }
})

接收参数：

 created(){
    console.log('params接收参数：', this.$route.params)
 },

1.7.3 动态路径参数

第一步：配置路由，写参数匹配模式

 {
    path: '/about/:id/:username',
    name: 'about',
    component: AboutView,
  },

第二步：跳转时传递数据

this.$router.push('/about/10/张三疯');

第三步：接收参数

console.log('动态路径参数：', this.$route.params)

1.8 路由的内置对象【重点】

$router 路由实例对象，主要用于调用方法，实现路由的跳转

//方法在$router上
this.$router.push()
this.$router.go()
this.$router.replace()

$route 路由信息对象，主要用于获取当前路由的各种信息

//属性在$route上
this.$route.path
this.$route.query
this.$route.name

1.9 路由前置守卫

在 router/index.js 中添加路由前置守卫，可以限制路由的跳转

router.beforeEach(function (to, from, next) {
  //to 到哪里去的路由信息对象
  //from 从哪里来的路由信息对象
  //next 执行该方法就是放行，可以正常访问
  if (to.path === '/' || to.path === '/home') {
    next();
  } else {
    console.log('不放行...')
  }
});