1x0 VueRouter - 基础 - 入门

446 阅读2分钟

VueRouter 基础教程系列 🎉


实例

创建一个最基本的路由实例对象。

JavaScript:

//创建组件对象
const About = {
    name: 'About',
    template: "<h1>This is About Page.</h1>",
    mounted(){
        console.log(this.$router);
    }
};
const Profile = {
    name: 'Profile',
    template: '<h1>This is Profile Page.</h1>',
    mounted(){
        console.log(this.$route);
    }
};

//创建路由配置,并将组件与对应路由路径进行映射。
const routes = [
    {
        path: '/about',
        component: About
    },
    {
        path: '/profile',
        component: Profile
    }
];

//创建路由实例对象
const router = VueRouter.createRouter({
    routes,
    history: VueRouter.createWebHashHistory()
});

//创建 Vue 应用。
const app = Vue.createApp({});

//将路由实例对象作为 Options 注入到应用全局中。
//这样所有的组件实例就可以通过 ` this.$router` 来访问 router 对象,而无需繁琐的导入/导出。
app.use(router);

app.mount('#app');

HTML:

<div id="app">
    <ul>
        <li><router-link to="/about">Go About</router-link></li>
        <li><router-link to="/profile">Go Profile</router-link></li>
    </ul>
    <hr/>
    <router-view />
</div>

路由模式

  • hash 模式使用 createWebHashHistory() 方法创建。
  • HTML5 history 模式使用 createWebHistory() 方法创建。

路由的渲染出口

VueRouter 的自定义组件 <router-view> 定义了路由视图的渲染出口。 VueRouter 允许有多个路由渲染出口,这主要用于路由嵌套和命名视图的场景中。

路由导航方式

VueRouter 提供了两种路由导航方式,分别是 “声明式”“命令式” 两种。

非替换的导航方式会向浏览器的 history 栈中加添加一条新的记录,因此你可以利用浏览器的前进/后退按钮来在栈中有顺序的前进或后退。

声明式命令式
<router-link to="...">Link</router-link>router.push()

可以使用 replace 属性(声明式)或 replace 方法(命令式)进行替换式的路由导航。这时浏览器的 history 栈中便不会记录之前的访问记录,因此浏览器的回退按钮将会失效(无法正确返回上一次的历史记录)。

声明式命令式
<router-link to="..." replace>Link</router-link>router.replace()

不论是 “声明式”还是“命令式”的路由导航方式,它们所接收的参数(目标地址)都是一致的。

详细来说,就是声明式的 to="..." attribute,与命令式的 push()replace() 方法,它们所接收的参数都是一致的。

const routes = [
    {
        path: '/user/:id',
        component: { template: '<div><h1>{{$route.params.id}}</h1><router-view /></div>' },
        children: [
            {
                path: 'profile',
                component: { template: '<p>profile</p>' }
            }
        ]
    }
];

命令式:


//字符串取值
this.$router.replace('/user/123/profile');

//对象取值
this.$router.push({
    path:'/user/123/profile',
    hash:'#team',
    query:{group:1}
});

// /user/123/profile?group=1#team

声明式:

<router-link to="/user/123/profile">link user profile</router-link>
<router-link :to="{
    path:'/user/123/profile',
    hash:'#team',
    query:{group:1}
}">link user profile</router-link>

除了 pushreplace 方法外,你还可以使用 router.go() 来横跨历史记录;前进与回退则可以使用 router.forward()router.back() 等方法。它们都是对 window.history API 的模仿。

值得一提的是,无论在创建路由器实例时传递什么样的 history 配置,Vue Router 的导航方法 (push、replace、go)都能始终如一地工作。

路由实例对象

在今后的上下文中,我们约定,路由实例对象也别称之为“路由器”对象。 路由器自带了 install 方法,所以可以被 app.use(router) 方法作为插件的形式进行全局注册。当 路由器被成功注册后,我们就可以在每个组件实例上使用 this.$router 的方式来访问该路由器对象,它与使用 createRouter() 创建的实例是同一个,这样调用的好处就是减少频繁的导入/导出。

切记,this.$router 与直接使用通过 createRouter 创建的 router 实例完全相同。

this.$router 实例对象存储了全部的路由相关的操作方法以及所有路由的相关信息。

方法说明
addRoute添加一条新的路由记录作为现有路由的子路由。
afterEach添加一个全局后置守卫。
back命令式导航(后退)
beforeEach添加一个全局前置钩子。
beforeResolve添加一个全局解析钩子。
forward命令式导航(前进)
getRoutes获取所有 路由记录的完整列表(相当于返回了整个 routes 配置)。
go命令式导航(跳转到历史栈中的指定索引)
hasRoute确认是否存在指定名称的路由。
install路由器的注册方法。
isReady路由器是否初始化完成。
onError路由器错误处理程。
push命令式导航(追加历史栈的方式)
removeRoute通过名称删除现有路由。
replace命令式导航(替换历史堆栈的方式)
resolve解析目标位置。
属性说明
currentRoute当前路由对应的路由信息对象。
options创建 Router 时传递的原始配置对象。只读的。

除此之外,VueRouter 还提供了另一个 this.$route 对象,它只存储了当前激活的路由信息。

属性说明
fullPath完整的路由地址,包含了 pathqueryhash
hash保存了从 URL 中提取的 hash 部分。总是以 # 开头。如果没有则为空字符串 ''
query保存了从 URL 中提取的“查询参数”,总是以 ? 开头,如果没有则为空对象 {}
params保存了从 path 中提取的 “路径参数”
matched保存了所有匹配到的路由,值是一个数组。
meta附加到从父级到子级合并(非递归)的所有匹配记录的任意数据。
name路由记录的名称,命名路由。
path当前路由的 path
href作用与 fullPath 基本相同。
redirectedFrom如果有重定向操作时,用于保存重定向的源地址,如果没有重定向,则为 undefined