目录
引入的步骤
0. Vue.use(VueRouter) 安装路由功能
- 定义路由
- 实例化router路由
- 挂载到根实例上
动态路由
①{ path: '/user/:id', component: User }
②this.$router.params.id
| 声明式 | 编程式 |
| <router-link :to=“/“bd> | router.push(‘/bd’) |
// 字符串
router.push('home')
// 对象
router.push({ path: 'home' })
// 命名的路由
router.push({ name: 'user', params: { userId: '123' }})
// 带查询参数，变成 /register?plan=private
router.push({ path: 'register', query: { plan: 'private' }})命名路由
{
path: '/user/:userId',
name: 'user',
component: User
}
<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>
router.push({ name: 'user', params: { userId: 123 }})| 声明式 | 编程式 |
| <router-link :to="..." replace> | router.replace(...) |
命名视图
<router-view name="ahhh"></router-view>
{
path: '/',
components: {
default: Foo,
ahhh: Bar,
b: Baz
}
}
有时候想同时 (同级) 展示多个视图，而不是嵌套展示，例如创建一个布局，有 sidebar (侧导航) 和 main (主内容) 两个视图。
你可以在界面中拥有多个单独命名的视图，而不是只有一个单独的出口。
—进阶—
导航守卫主要用来通过跳转或取消的方式守卫导航。有多种机会植入路由导航过程中：全局的, 单个路由独享的, 或者组件级的。【常用的5个】
记住参数或查询的改变并不会触发进入/离开的导航守卫。你可以通过观察 $route 对象来应对这些变化，或使用 beforeRouteUpdate 的组件内守卫。
全局前置路由守卫
router.beforeEach((to, from, next) => {
// ...
})
// next(): 进行管道中的下一个钩子。如果全部钩子执行完了，则导航的状态就是 confirmed (确认的)。
// next(false): 中断当前的导航。如果浏览器的 URL 改变了 (可能是用户手动或者浏览器后退按钮)，那么 URL 地址会重置到 from 路由对应的地址。
// next('/') 或者 next({ path: '/' }): 跳转到一个不同的地址。当前的导航被中断，然后进行一个新的导航。
路由独享守卫（在路由配置上定义）
{
path: '/foo',
component: Foo,
beforeEnter: (to, from, next) => {
// ...
}
}
组件内路由守卫
beforeRouteEnter (to, from, next) {
// 在渲染该组件的对应路由被 confirm 前调用
// 不！能！获取组件实例 `this`
// 因为当守卫执行前，组件实例还没被创建
// 但是可以通过传一个回调给 next来访问组件实例
// next(vm => {
// // 通过 `vm` 访问组件实例
// })
},beforeRouteUpdate (to, from, next) {
// 在当前路由改变，但是该组件被复用时调用
// 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
// 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
// 可以访问组件实例 `this`
},beforeRouteLeave (to, from, next) {
// 导航离开该组件的对应路由时调用
// 可以访问组件实例 `this`
}过渡动效
<!-- 使用动态的 transition name -->
<transition :name="transitionName">
<router-view></router-view>
</transition>
滚动行为控制 （todo:模拟“滚动到锚点”的行为：）
// 返回 savedPosition，在按下 后退/前进 按钮时，就会像浏览器的原生表现那样.
// 利用路由元信息更细颗粒度地控制滚动
const router = new VueRouter({
routes,
scrollBehavior(to, from, savedPosition) {
// 翻页滚到350、左右移动保留原位、其它滚到0
if (savedPosition) {
return savedPosition;
}
if(to.query.page) {
return { x: 0, y: 350 }
} else if(to.meta.scrollCustom && from.meta.scrollCustom) {
from.meta.savedPosition = document.body.scrollTop;
} else {
return { x: 0, y: 0, }
};
},
});
路由懒加载
const Foo = () => import('./Foo.vue') 【这样写就可以了】
//使用懒加载，当使用这个组件的时候再加载资源，当组件资源较大时，不建议使用，可能会出现白屏现象 //而且最好使用绝对路径，@是绝对路径的意思,相当于src下
【懒加载这里涉及到一个知识点，es6模块的import()函数，该函数和import命令不同哦，该函数会返回一个promise对象】
//引入组件 【不是懒加载的方式 首页】
import Home from "./views/Home.vue"
component：Home把组件按组分块
const Foo = () => import(/* webpackChunkName: "group-foo" */ './Foo.vue')
Webpack 会将任何一个异步模块与相同的块名称组合到相同的异步块中。
在大型应用中，我们可能需要将应用分割成小一些的代码块，并且只在需要的时候才从服务器加载一个模块。为了简化，Vue 允许你以一个工厂函数的方式定义你的组件，这个工厂函数会异步解析你的组件定义。Vue 只有在这个组件需要被渲染的时候才会触发该工厂函数，且会把结果缓存起来供未来重渲染。【异步组件】
@click.native 路由上的修饰符
如果是普通的html，使用@click就可以触发。
如果使用组件和路由，在router-link标签中就需要使用@click.native。不然就只会跳转而不会触发事件。
native修饰符只能用在组件上, 不能用在原生标签上。
API
- active-class
设置链接激活时使用的 CSS 类名
- exact 【精确匹配】
“是否激活”默认类名的依据是包含匹配。 举个例子，如果当前的路径是 /a 开头的，那么 <router-link to="/a"> 也会被设置 CSS 类名。
<!-- 这个链接只会在地址为 / 的时候被激活 -->
<router-link to="/" exact></router-link>
- <router-view>
渲染路径匹配到的视图组件
<transition>
<keep-alive>
<router-view></router-view>
</keep-alive>
</transition>- base
类型: string
默认值: "/"
应用的基路径。例如，如果整个单页应用服务在 /app/ 下，然后 base 就应该设为 "/app/"。
- mode
hash、history
- scrollBehavior
滚动行为
- this.$router
router 实例。 - this.$route
当前激活的路由信息对象。
一个路由对象 (route object) 表示当前激活的路由的状态信息，包含了当前 URL 解析得到的信息，还有 URL 匹配到的路由记录 (route records)。
addRoutes
vue-router提供了addRoutes()方法，可以动态注册路由。
场景：不同权限的用户登录，可以访问的路由不同。
//例子待补充
asyncRouterGet() {
router.addRoutes(asyncRouterMap)
}
3466
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
