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>