Vue Router 路由 - 爱码网

路由介绍
路由的注册
路由的钩子

路由介绍

vue-router是Vue的路由系统，定位资源的，我们可以不进行整页刷新去切换页面内容。

官网详情介绍：https://router.vuejs.org/zh/

路由的注册

- 使用router，需要导入模块：

<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

- 注册路由：在对象中添加 router 参数，即可将定义的路由加入：

const app = new Vue({
        el: "#app",
        router: my_router,
    })

// my_router 就是自定义的路由，为了代码的整洁，将它单独解耦了出来；

- 定义路由：自定义的路由是一个 VueRouter({}) 对象；对象中routes参数来记录自定义的实际路由信息；

let my_router = new VueRouter({
        routes: url
    });
// 联合上文看， 上文中的 my_router;
// 注意，routes 不可更改；
// url 是定义的路由的具体信息，可见下文；

- 定义路由中的每个不同的路由信息：

路由信息实际上是一个数组；

数组中包含的是每一个不同的url对象；

url对象中包含的参数有：path， name， component

let url = [
        {
            path: "/",   // 路径名字
            name: "home", // 反向解析
            component: {   // 组件
                template: `<div>
                            <h1>这是首页</h1>
                            <h2>首页内容</h2>
                            </div>
                            `
            }
        },
        {
            path: "/index",   // 路径名字
            name: "index", // 反向解析
            component: {   // 组件
                template: `<div>
                            <h1>这是登录</h1>
                            <h2>登录内容</h2>
                            </div>
                            `
            }
        },
    ];

- 增加子路由：

url对象中还有一个参数叫做children，该参数就是用来注册子路由;

子路由 对应的也是一个数组，数组中包含这所有的子路由对象；

// 补充：redirect 参数，当访问该页面，自动跳转


let url = [
        {
            path: "/",      // 路径名字
            name: "home",   // 反向解析
　　　　　　　redirect: "/details"  // 默认跳转子路由的页面
            component: {    // 组件
                template: `<div>
                            <h1>这是首页</h1>
                            <h2>首页内容</h2>
                                <div>
                                    <router-link to="/details">详情</router-link>
                                    <router-view></router-view>
                                </div>
                            </div>
                            `
            },
            children: [
                {
                    path: "/details",
                    name: "details",
                    component: {
                        template: `
                            <div><h1>这是详情页面</h1></div>
                        `
                    }
                },
            ]
        }]

- 在页面中使用自定义的路由：

<router-view></router-view>

- 在页面中显示锚点按钮：

// 直接跳转：
<router-link to="/">首页</router-link>

// 通过反向解析获取url
<router-link :to="{name: 'home'}">首页</router-link>
<router-link :to="{name: 'login'}">登录</router-link>

- 路由完整示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
    <!--注册路由需要导入该模块-->
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

<body>
<div id="app">
    <router-link :to="{name: 'home'}">首页</router-link>
    <router-link :to="{name: 'login'}">登录</router-link>
    <router-view></router-view>
</div>

<script>
    // 路由信息实际上是一个数组；
    // 数组中包含的是每一个不同的url对象；
    // url对象中包含的参数有：path， name， component
    // url对象中还有一个参数叫做children，该参数就是用来注册 子路由，
    // 子路由 对应的也是一个数组，数组中包含这所有的子路由对象；
    let url = [
        {
            path: "/",      // 路径名字
            name: "home",   // 反向解析
            component: {    // 组件
                template: `<div>
                            <h1>这是首页</h1>
                            <h2>首页内容</h2>
                                <div>
                                    <router-link to="/details">详情</router-link>
                                    <router-view></router-view>
                                </div>
                            </div>
                            `
            },
            children: [
                {
                    path: "/details",
                    name: "details",
                    component: {
                        template: `
                            <div><h1>这是详情页面</h1></div>
                        `
                    }
                },
            ]
        },
        {
            path: "/login",
            name: "login",
            component: {
                template: `<div><h1>这是登录页面</h1></div>`
            }
        },
    ];

    // 自定义的路由是一个 VueRouter({}) 对象；
    // 对象中routes参数来记录自定义的实际路由信息；
    let my_router = new VueRouter({
        routes: url
    });

    // 在对象中添加 router 参数，即可将定义的 路由加入
    const app = new Vue({
        el: "#app",
        router: my_router,
    })
</script>
</body>
</html>

完整示例