Day88

時間 2019-11-24

標籤 day88 day 简体版

原文原文鏈接

day88-4VueRouter之安裝使用 https://www.bilibili.com/video/av35435753/?p=35html

1. 如今的架構：先後端分離vue

今日內容：python

2. VueRouter組件下載及安裝vue-router

2.1 作一個例子，分爲使用VueRouter、vue組件和不使用任何組件兩種狀況；後端

2.1.1 無組件瀏覽器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--<script href="./statics/vue.min.js"></script>-->
    <!--<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>-->
</head>
<body>
    <div id = "app"></div>
    <script>
        let oDiv = document.getElementById('app');
        window.onhashchange = function(){
            switch (location.hash){
                case '#/login':
                    oDiv.innerHTML = `<h1>這是登陸頁面</h1>`;
                    break;
                case '#/register':
                    oDive.innerHTML = `<h1>這是註冊頁面</h1>`;
                    break;
                default:
                    oDiv.innerText = `<h1>這是首頁</h1>`;
                    break;
            }
        }
    </script>
</body>
</html>

先使用瀏覽器運行該代碼，而後在地址欄添加 #/login 便可架構

2.1.2 使用Vue&VueRouter組件app

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../statics/vue.min.js"></script>
    <script src="../statics/vue-router.js"></script>
</head>
<body>
<div id="app"></div>
<script>
    Vue.use(VueRouter);  //1.在Vue根實例中使用，VueRouter

    let Home = {
        template: `
        <div>
            <h1>這是首頁頁面 </h1>
        </div>`
    };
    let Login = {
        template: `
        <div>
            <h1>這是登陸頁面 </h1>
        </div>`
    };
    let Register = {
        template: `
        <div>
            <h1>這是註冊頁面 </h1>
        </div>`
    };
    //4. 使用router-link，router-view
    let App = {
        /*template:`
         <div>
         <app-home></app-home>
         <app-login></app-login>
         <app-register></app-register>
         `,
         components:{
         'app-home':Home,
         'app-login':Login,
         'app-register':Register
         }*/
        //router-link會渲染成a標籤，to變成href屬性；router-view是渲染的出口
        template: `
            <div>
                <router-link to="/">首頁</router-link>
                <router-link to="/register">註冊</router-link>
                <router-link to="login">登陸</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/>`,
        //3. 第三步，在根實例中註冊router對象
        router: router,
        components: {
            App
        }
    })
</script>
</body>
</html>

相關標籤/搜索

day88

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。