VueRouter代码笔记

VueRouter

VueRouter基本使用

<!-- 引入对应的模块 -->
<script src="./static/vue.min.js"></script>
<script src="./static/vue-router.js"></script>

<div id="app">
    <div>
        <!-- 第三步：结合router-link和router-view调用 -->
        <router-link to="/">首页</router-link>
        <router-link to="/login">登录</router-link>
        <router-link to="/register">注册</router-link>
        <router-view></router-view>
    </div>
</div>

<script>
    // Vue.use(VueRouter);   // 这个主要是在vue-cli会用到，这里可以不用填

        let Register = { template: '<div><h2>这是注册页面</h2></div>'
        let Login = { template: '<div><h2>这是登录页面</h2></div>'
        let Home = { template: '<div><h2>这是主页面</h2></div>'

    // 第一步：实例化router对象路径和页面进行绑定对应关系
    let router = new VueRouter({
      routes: [
        {  path: '/',  component: Home,  },
        { path: '/login',  component: Login, },
        { path: '/register', component: Register },
      ]
    })
    new Vue({
      el: "#app",
    // 第二步：vue根实例中注册router对象
      router: router,
    })
  </script>

命名路由（name）

<div id="app">
        <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>
</div>
<script>
        let Register = { template: '<div><h2>这是注册页面</h2></div>'
        let Login = { template: '<div><h2>这是登录页面</h2></div>'
        let Home = { template: '<div><h2>这是主页面</h2></div>'

    let router = new VueRouter({
      routes: [
        {  name: 'home', path: '/',  component: Home,  },
        { name: 'login',  path: '/login',  component: Login, },
        { name: 'register', path: '/register', component: Register },
      ]
    })
    new Vue({
      el: "#app",
      router: router,
    })
  </script>

路由参数

<div id="app">
    <div>
        <router-link :to="{ name: 'home' }">主页面</router-link>
        <router-link :to="{ name: 'userparams', params: { userId: 1} }">用户参数params</router-link>
        <router-link :to="{ name: 'userquery', query: { userId: 2} }">用户参数 query</router-link>
        <router-view></router-view>
    </div>
</div>
<script>
    Vue.use(VueRouter);

    let Home = { template:'<div>这是主页面</div>' }
    let UserParams = { template:'<div>这是用户params</div>' }
    let UserQuery = { template:'<div>这是用户query</div>' }

    let router = new VueRouter({
        routes: [
            {
                name: 'home',
                path: '/',
                component: Home,
            },
            {
                // 路由的参数： /user/1 /user/2
                name: "userparams",
                path: '/user/:userId',
                component: UserParams
            },
            {
                // 路由参数： /user?wenqipeng=111
                name: 'userquery',
                path: '/user',
                component: UserQuery
            },
        ]
    })

    new Vue({
        el: "#app",
        router: router
    })
</script>

子路由

<div id="app">
    <div>
        <router-link to="index">首页</router-link>
        <router-link to="courses">课程页面</router-link>
        <router-view></router-view>
    </div>
</div>
<script>
    let Index = { template: '<div><h2>这是首页</h2></div>' }
    let Lightcourses = { template: '<div><h2>这是Lightcourses</h2></div>' }
    let Degreecourses = { template: '<div><h2>这是Degreecourses</h2></div>' }
    let Courses = { 
        template: `
            <div>
                <h2>这是课程页</h2>
                <router-link to="lightcourses">轻客</router-link>
                <router-link to="degreecourses">学位课</router-link>
                <router-view></router-view>
            </div>'
        `
    }

    let router = new VueRouter({
        routes: [
            {
                name: 'index',
                path: '/index',
                component: Index,
            },
            {
                name: 'courses',
                path: '/courses',
                component: Courses,
                children: [   <!-- 路由 -->
                    {
                        name: 'lightcourses',
                        path: 'lightcourses',
                        component: Lightcourses
                    },
                    {
                        name: 'degreecourses',
                        path: 'degreecourses',
                        component: Degreecourses
                    },
                ]
            },
        ]
    })
    new Vue({
        el: "#app",
        router: router
    })
</script>

路由重定向 (redirect)

<div id="app">
    <div>
        <router-link to="/">首页</router-link>
        <router-link to="/login">登录</router-link>
        <router-link to="/pay">支付</router-link>

        <router-view></router-view>
    </div>
</div>

<script>

    let Index = { template: '<div><h2>这是首页</h2></div>'}
    let Login = { template: '<div><h2>这是登录页面</h2></div>'}
    let Pay = { template: '<div><h2>这是支付页面</h2></div>'}

    let router = new VueRouter({
        routes: [
            {
                path: '/',
                component: Index
            },
            {
                path: '/login',
                component: Login
            },
            {
                path: '/pay',
                // component: Pay,
                redirect: '/login'    <!-- 路由重定向 -->
            },
        ]
    })
    new Vue({
        el: "#app",
        router: router
    })

</script>

路由之钩子函数 （router.beforeEach）

<div id="app">
            <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>

    <script>
            let Home = { template: '<div><h2>这是首页页面</h2></div>' }
            let Login = { template: '<div><h2>这是登录页面</h2></div>' }
            let Pay = { template: '<div><h2>这是支付页面</h2></div>' }
            let router = new VueRouter({
                    routes: [ 
                            { name: 'home', path: '/', component: Home, },
                            { name: 'login', path: '/login', component: Login, },
                            { name: 'pay', path: '/pay', meta: { required_login: true }, component: Pay, },
                    ]
            });

            // 通过router对象的beforeEach(function(to, from, next))
            router.beforeEach(function (to, from, next) {
                 console.log("to: ", to);
                 console.log("from: ", from);
                 console.log("next: ", next);
                 if ( to.meta.required_login ) {
                         next('/login');
                 } else {
                         next();
                 }
            });

            new Vue({
                    el: "#app",
                    router: router,
            })
    </script>