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的使用

　　

<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,
                }
            ]
        });