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>