VUE 之 路由 VueRouter

1、VueRouter的安装

　　1.1、https://unpkg.com/vue-router/dist/vue-router.js下载安装。

　　1.2、<script src="./static/vue-router.js"></script>

2、VueRouter的使用

　　我们在使用Vue中的属性十，都可以通过$属性名拿到它所对应的对象

　　$route  拿到的是一个object对象，里边有所有的信息

　　$router 拿到的是一个VueRouter实例化的对象，里边有VueRouter的所有方法。

<script>
        // 1. 在Vue根实例中使用，VueRouter
        Vue.use(VueRouter);

        let Home = {
            template: `
                <div>
                    <h1>这是主页页面</h1>
                </div>
            `
        };

        let Login = {
            template: `
                <div>
                    <h1>这是登录页面</h1>
                </div>
            `
        };

        let Register = {
            template: `
                <div>
                    <h1>这是注册页面</h1>
                </div>
            `
        };

        let App = {
            // 第四步
            // router-link会渲染成a标签，to会变成href属性，to后面是router中定义的路径
            // 第五步
            // router-view是页面内容的渲染出口
            template: `
                <div>
                    <router-link to="/">首页</router-link>
                    <router-link to="/login">登录</router-link>
                    <router-link to="/register">注册</router-link>
　　
                    <router-view></router-view>
                </div>
            `,

        };

        // 2. 第二步实例化一个router对象
        // 本质上是将路径和页面内容绑定了对应关系
        let router = new VueRouter({
            routes: [
                {
                    path: '/',
                    component: Home,
                },
                {
                    path: '/login',
                    component: Login,
                },
                {
                    path: '/register',
                    component: Register,
                }
            ]
        });

        new Vue({
            el: "#app",
            template: `<App/>`,
            // 第三步，在根实例中注册router对象
            router: router,        #  固定写法router
            components: {
                App,
            }
        });
    </script>

3、VueRouter的路由命名

template: `
                <div>
                    <router-link :to="{ name: 'home' }">首页</router-link>
                    <router-link :to="{ name: 'login' }">登录</router-link>
                    <router-link :to="{ name: 'register' }">注册</router-link>

                    <router-view></router-view>
                </div>
            `,
        };

# 在router-link中进行命名    ：to='{name:'xx'}'

let router = new VueRouter({
    routes: [
        {
            name: 'home',
            path: '/',
            component: Home,
        },
        {
            name: 'login',
            path: '/login',
            component: Login,
        },
        {
            name: 'register',
            path: '/register',
            component: Register,
        }
    ]
});

4、VueRouter之参数

 template: `
                <div>
                    <router-link :to="{ name: 'home'}">首页</router-link>
                    <router-link :to="{ name: 'userParams', params: { userId: 1} }">登录</router-link>
                    <router-link :to="{ name: 'userQuery', query: { userId: 2 }  }">注册</router-link>

                    <router-view></router-view>
                </div>
            `,
        };

        // 2. 第二步实例化一个router对象
        // 本质上是将路径和页面内容绑定了对应关系
        let router = new VueRouter({
            routes: [
                {
                    name: 'home',
                    path: '/',
                    component: Home,
                },
                {
                    // xxx/1              如果参数是这种样式，在template中使用params:{userId:1}
                    name: 'userParams',
                    path: '/user/:userId',
                    component: userParams,
                },
                {
                    // xxx/?userId=1      如果参数是带?xx=xx的形式，在template中使用query:{userId:2}
                    name: 'userQuery',
                    path: '/user',
                    component: userQuery,
                }
            ]
        });

5、VueRouter之子路由

let router = new VueRouter({
            routes: [
                {
                    name: 'home',
                    path: '/',
                    component: Home,
                },
                {
                    name: 'courses',
                    path: '/courses',
                    component: Courses,
                    children: [                                  # 创一个children的数组，里边包含的是子路由的内容
                        {
                            path: 'lightcourses',
                            component: LightCourses
                        },
                        {
                            path: 'degreecourses',
                            component: DegreeCourses
                        },
                    ]
                },
            ]
        });

6、VueRouter之子路由append （将子路由路径拼接到父级路由后边）

<script>
        Vue.use(VueRouter);

        let Home = {
            template: `
                <div>
                    <h1>这是首页页面</h1>
                </div>
            `
        };

        let Courses = {
            template: `
                <div>
                    <h1>这是课程页面</h1>
                    <router-link to="lightcourses" append>轻课</router-link>             # 在注册的课程标签下的两个子路由的a标签中 加入append,就可以将路径拼接到父级路由后边
                    <router-link to="degreecourses" append>学位课</router-link>

                    <router-view></router-view>
                </div>
            `
        };

        let LightCourses = {
            template: `
                <div>
                    <h1>这是轻课页面</h1>
                </div>
            `
        };

        let DegreeCourses = {
            template: `
                <div>
                    <h1>这是学位课程页面</h1>
                </div>
            `
        };

        let App = {
            template: `
                <div>
                    <router-link :to="{ name: 'home' }" >首页</router-link>
                    <router-link :to="{ name: 'courses'} " >课程页面</router-link>

                    <router-view></router-view>
                </div>
            `
        };

        let router = new VueRouter({
            routes: [
                {
                    name: 'home',
                    path: '/',
                    component: Home,
                },
                {
                    name: 'courses',
                    path: '/courses',
                    component: Courses,
                    children: [                                    #  chlidren 是子路由与父级路由的关系
                        {
                            path: 'lightcourses',
                            component: LightCourses
                        },
                        {
                            path: 'degreecourses',
                            component: DegreeCourses
                        },
                    ]
                },
            ]
        });

        new Vue({
            el: "#app",
            template: `<App/>`,
            components: {
                App,
            },
            router: router,
        })

    </script>

　　不写append：

　　写append：

7、VueRouter之重定向(redirect)

let router = new VueRouter({
            routes: [
                {
                    name: 'home',
                    path: '/',
                    component: Home,
                },
                {
                    name: 'login',
                    path: '/login',
                    component: Login
                },
                {
                    name: 'pay',
                    path: '/pay',
                    redirect: '/login',            # 哪里需要重定向直接加一个redirect：'/路径'
                    component: Pay,
                },
            ]
        });

8、VueRouter之钩子函数

<script>
        // 1. 使用VueRouter
        Vue.use(VueRouter);

        let Home = {
            template: `
                <div>
                    <h1>这是首页页面</h1>
                </div>
            `
        };

        let Login = {
            template: `
                <div>
                    <h1>这是登录页面</h1>
                </div>
            `
        };

        let Pay = {
            template: `
                <div>
                    <h1>这是支付页面</h1>
                </div>
            `
        };

        let App = {
            // router-link会渲染成a标签，to会渲染成href
            // router-view是内容的渲染出口
            template: `
                <div>
                    <router-link :to="{ name: 'home' }">首页</router-link>
                    <router-link :to="{ name: 'login' }">登录</router-link>
                    <router-link :to="{ name: 'pay' }">支付</router-link>

                    <router-view></router-view>
                </div>
            `
        };

        // 2. 创建一个router对象
        // 把a标签的锚点值和页面内容绑定了对应关系
        let router = new VueRouter({
            routes: [                              # 固定写法routes：[数组]
                {
                    name: 'home',
                    path: '/',
                    component: Home,
                },
                {
                    name: 'login',
                    path: '/login',
                    component: Login
                },
                {
                    name: 'pay',
                    path: '/pay',
                    meta: { required_login: true },              # 固定写法用meta：{自定义变量名:true}
                    component: Pay,
                },
            ]
        });

        // 通过router对象的beforeEach(function(to, from, next))
        router.beforeEach(function (to, from, next) {                 # 三个参数：to 表示路由要访问的目的路径
           console.log("to: ", to);                                             from 表示从哪个路径访问跳转过来的，比如从登陆界面访问支付界面，from就是登陆界面的路径，to 就是支付的路径
           console.log("from: ", from);　　　　　　　　　　　　　　　　　　　　　　　　 next 表示接下来要去哪儿 ，next()如果里边没有参数，就表示接下来正常执行。
           console.log("next: ", next);
           if ( to.meta.required_login ) {
               next('/login');
           } else {
               next();
           }
        });

        new Vue({
            el: "#app",
            template: `<App/>`,
            components: {
                App,
            },
            // 在根实例中注册router对象
            router: router,
        })

    </script>

9、VuRouter之去掉中间的那些多余的参数

let router = new VueRouter({
            mode: 'history',            # 只需要在router对象中加一个mode：'history',就可以去掉多余的参数，效果如下
            routes: [
                {
                    name: 'home',
                    path: '/',
                    component: Home,
                },
                {
                    name: 'login',
                    path: '/login',
                    component: Login
                },
                {
                    name: 'pay',
                    path: '/pay',
                    meta: { required_login: true },
                    component: Pay,
                },
            ]
        });