router-view

路由占位符: 在实际显示时, 会切换成对应的组件

自定义组件分两种:

组成页面的一部分, 目的是复用: 按钮 -> 标签 -> 超链接 --- 存储在 components 中
组成页面的一部分, 目的是整体切换: 路由系统切换的页面 --- 存储在 views 中

<template>
    <div>
        <router-view/>    // 两种都可以使用
        <router-view></router-view>    //选择喜欢的即可
    </div>
</template>

直接在App.vueli里面添加占位符即可

router-link

router-link 本质是a 标签

<div id="nav">
    <router-link to="/">首页</router-link>
    <router-link to="/about">关于</router-link>
    <router-link to="/news">新闻</router-link>
    <router-link to="/register">注册</router-link>
    <router-link to="/login">登录</router-link>
</div>

to就是跳转的位置, 相当于 a 标签中的src属性

router-link 会根据路径自动添加激活状态, 给了两种激活状态

模糊匹配: router-link-active
精确匹配: router-link-exact-active

模糊: 路径中只要存在就高亮

例如: /about 匹配到 / 和 /about; /news 匹配 / 和 /news

&.router-link-active {
    background-color: orange;
}

&.router-link-exact-active {
    background-color: orange;
}

路由

在router文件夹下方的index.js中来配置路由地址信息

路由注册方式有两种

非懒加载 : 先import 再使用
懒加载 : 利用箭头函数引入, 临时调用函数时再引入 -- 未使用前不引入; 使用时临时引入

下面我们先来看具体的写法:

{
    // path: 路径; 必须 / 开头
    path: '/news',
    // component: 组件;  代表 路径对应的组件
    component: NewsPage,
},

非懒加载

import Vue from 'vue'
import VueRouter from 'vue-router'
import HomeView from '../views/HomeView.vue'
import NewsPage from '../views/NewsPage.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/news',
    component: NewsPage,
  },
  {
    path: '/',
    name: 'home',
    component: HomeView
  },
]

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

export default router

上方代码就是非懒加载的写法, 先在上方 import 然后在下方调用即可

懒加载

import Vue from 'vue'
import VueRouter from 'vue-router'
import HomeView from '../views/HomeView.vue'
Vue.use(VueRouter)

const routes = [
  {
    path: '/douyu',
    name: '斗鱼页面', //非必备属性, 起个名字方便查看
    component: () => import('../views/DouYu.vue'),
  },
  {
    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/AboutView.vue')
  },
]

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

export default router

上方代码就是懒加载的写法利用箭头函数引入, 临时调用函数时再引入

至于非懒加载和懒加载有什么作用呢?那就是性能上面的作用, 就记着, 哪个页面你觉得访问的数量比较高, 那就用非懒加载, 哪个页面访问量少就用懒加载即可

跳转

在页面 template 中, 页面跳转方式分两种: 标签式和编程式

标签式跳转

标签式跳转: <router-link to="/路径">

最终表现是 a 标签, 所以给a 标签添加样式即可

编程式跳转

通过代码完成跳转操作

$router: 是vue router对象, 包含所有的路由操作
$route: 是当前路由信息, 本质上是 $router.currentRoute 属性

<template>
  <div>
    <div id="nav">
      <router-link to="/">首页</router-link>
      <router-link to="/about">关于</router-link>
      <button @click="goto('/news')">新闻</button>
      <button @click="goto('/login')">登录</button>
    </div>
    <router-view />
  </div>
</template>

<script>
  export default {
    methods: {
      goto(path) {
        // this: 是当前的vue对象
        // 路由对象在 router/index.js 中初始化 并 导出
        // 在 main.js 中被 引入 和 填写到 vue对象里
        console.log(this.$router);  //从vue中获取 路由对象
        // push: 用于在路径中推入新的路径

        // 当前路由信息读取: this.$router.currentRoute 太长了
        // 作者提供了简化的属性 $router, 可以快速读取
        // 相当于 $route(){return this.$router.currentRoute}
        console.log('$route', this.$route)
        // if(this.$router.currentRoute.path == path) return
        if(this.$route.path == path) return

        this.$router.push(path)

        // 注意: 数组也有一个push方法, 与这里的push仅仅是同名
      }
    },
  }
</script>

路由传参

路由传参类似于 get的传参

格式: 路径?参数=值&参数=值...

参数存储在 : $route.query 属性里

<template>
  <div>
    <div id="nav">
      <router-link to="/about?name=小明&age=22&phone=18539577777">关于小明</router-link>
      <router-link to="/about?name=小红&age=18&phone=15788779999">关于小红</router-link>
      <!-- <router-link>关于</router-link> -->
    </div>
    <router-view />
  </div>
</template>

Vue路由 $route $router router-view router-link