Vue路由

路由模板

🌰提供路由渲染

router-link标签提供路由地址选项,在to属性中指定路由地址

<nav>
    <!-- 多组路由选项 -->
    <router-link to="/" >地址一</router-link>
    <router-link to="/posts">地址二</router-link>
</nav>

router-view标签渲染出选中路由

<main>
    <router-view></router-view>
</main>

🌰定义路由组件

const [HOME, POSTS] = [
    { template: '<div>主页</div>' },
    { template: '<div>文章</div>' }
]

🌰定义路由

path与component为必选项

const routes = [
    { path: '/', component: HOME },
    { path: '/posts', component: POSTS }
]

🌰创建实例并配置routes

const router = new VueRouter.createRouter({
    history: VueRouter.createWebHashHistory(),
    routes,            // ES6 routes == routes:
})

🌰创建并挂载路由

const app = Vue.createApp({})
app.use(router).mount('#app')

获取路由

使用this.$route或在setup内用createRouter创建可获得路由信息对象

this.$route.path      //
this.$route.
this.$params          // 动态路由参数的对象

动态路由

用/:rute来表示路径参数

不同参数都会映射至父级路径

const routes = [
    { path: '/user/:id', component: USER }
]

路由匹配

🌿同父级路径的动态路由

在路径后加/:rute(reg)来匹配不同路由

const routes = [
    { path: '/:id(\\d+)', component: USER },    // 数字才匹配
    { path: '/:piicture', component: PICTURE }  // 其他情况匹配
]

🌿多级动态路由

在路径末加*(零个以上),+(一个以上)来匹配重复项

const routes = [
    { path: '/:option(//d+)*' component: OPTIONS }
]

🌿可选动态路由

在路径末加?表示路径至多有一个

const routes = [
    // 有无name均会渲染USER
    { path: '/:id(//d+)/:name?', component: USER }
]

嵌套路由

在路由children属性内可添加子路由,在父组件的router-view标签内渲染子组件

子路由设置path为''为默认时渲染

const routes = [
    { 
        path: '/:id(\\d+)',
        component: USER,
        children: [
            { path: '', component: DEFAULT },
            { path: 'message', component: MESSAGE },
            { path: 'pictures', component: PICTURES }
        ]
    }
]

编程式导航

🥑导航至不同位置

触发router-link即调用router.push()方法

有path属性时,params属性将失效

router.push('/users/eduardo')                                   // 字符串路径

router.push({ path: '/users/eduardo' })                         // 带有路径的对象

router.push({ name: 'user', params: { username: 'eduardo' } })  // 命名的路由，并加上参数，让路由建立 url

router.push({ path: '/register', query: { plan: 'private' } })  // 带查询参数，结果是 /register?plan=private

router.push({ path: '/about', hash: '#team' })                  // // 带 hash，结果是 /about#team

🥑替换当前位置

使用replace不会向history增加记录而是替换当前记录

声明式:

<router-link to="/user" replace></router-link>

编程式:

router.replace({ path: '/user' })
router.push({ path: '/user', replace: true })      // 等效于

命名路由

使命名的路由可简便的调用

const routes = [
    {
        path: '/user/:id/:name',
        name: 'user',             // 命名为`user`
        component: USER
    }
]

编程式:

router.push({
    name: 'user',
    params: {                     // 路由参数
        id: 001,
        name: 'Jonathan'
    }
})

声明式:

<router-link to="{ name: 'user', params: { id: 001, name: 'Jonathan' } }">
    个人信息
</router-link>

命名视图

可以在同一组件内渲染多个router-view

<!-- name默认值为default -->
<router-view></router-view>
<router-view name="Docs"></router-view>
<router-view name="Header"></router-view>

为多个组件指定渲染视图

const routes = [
    {
        path: '/',
        components: {        // 需加`s`
            default: Menu,
            Docs: Docs,      // ES6简写`Docs,`
            Header: Header
        }
    }
]

重定向

将路由1跳转至路由2

可将没有锚点的路由/重定向至主页面路由/home

重定向可以是路径,方法,命名路由

const routes = [
    { path: '/', redirect: '/home' },     // 可不绑定组件
    { path: '/home', component: Home }
]

别名

路由组件传参

🍆布尔模式

设置props为true即可将router.params属性赋给组件的props

const USER = {
    props: ['id']
    template: '<div>{{ id }</div>'
}

const routes = [
    { path: '/user/:id', component: USER, props:true }
]

🍆命名视图

可为不同的视图设置props

const routes = {
    path: '/user/:id',
    components: {
        default: User,
        Docs,
        Posts
    },
    props: {
        default: false,
        Docs: true,
        Posts: false
    }
}

🍆对象模式

导航守卫

🥬全局前置守卫

全局前置守卫会按创建顺序执行,在所有守卫resolve完前状态均为pending

beforeEach((to, from[, next]) => {})

返回true或不返回表示导航有效

返回false取消导航,回至from

返回路由对象导航至该路由对象

to:正在进入的路由对象

from:正在离开的路由对象

• next()

执行下一个

• next(false)

停止导航,回到from

• next(路由对象)

改变to路由对象

• next(Error)

导航终止,Error传给回调router.onError

const router = new VueRouter({...})
router.beforeEach(('/user', '/home', next) => {
    // 处理代码
    next(...)
})

🥬全局后置钩子

后置钩子不会改变导航,不接受next,其用于改变页面标题等功能

afterEach((to, from[, failure]) => {})

🥬路由独享守卫

可以直接在routes中配置守卫,守卫只有从不同路由进入才触发,动态参数改变不触发

const routes = [
    {
        path: '/user/:id',
        component: User,
        beforEach: (to, from, next) => {
            // ...
        }
    }
]

路由元信息

可以附加所需信息至meta属性,路由地址与导航守卫均可访问

const routes = [
    {
        // 其他配置
        meta: {
            isAuthentication: true
        }
    }
]

访问meta

$route.meta             // 访问父字段至子字段的meta
$route.matched[].meta   // 访问路由数组中z的meta

数据获取