Vue入門十一、路由的使用

一、vue-router使用

1、下載npm i vue-router -S
2、安裝插件Vue.use(VueRouter)
3、創建路由對象
var router = new VueRouter()
4、配置路由規則
router.addRoutes([路由對象])
路由對象{path:'錨點', component:需要顯示的組件}
5、將配置好的路由對象交給Vue
6、使用組件<router-view></router-view>

成都創新互聯網站建設由有經驗的網站設計師、開發人員和項目經理組成的專業建站團隊，負責網站視覺設計、用戶體驗優化、交互設計和前端開發等方面的工作，以確保網站外觀精美、成都網站建設、做網站易于使用并且具有良好的響應性。

二、代碼示例

方法一、

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script type="text/javascript" src="vue.js"></script>
<script type="text/javascript" src="vue-router.js"></script>
<div id="app"></div>
<script type="text/javascript">
    var Login = {
        template: `
                <div>登陸成功</div>
            `
    }
    // 安裝路由
    Vue.use(VueRouter);

    // 創建路由
    var router = new VueRouter();

    // 配置路由規則
    router.addRoutes(
        [
            {path: '/login', component: Login}
        ]
    )

    // 使用路由組件
    new Vue({
            el: '#app',
            router,
            template: `
                <div>
                    <p>留坑使用路由組件</p>
                    <router-view></router-view>
</div>
            `
        }
    )

</script>
</body>
</html>

方法二、

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script type="text/javascript" src="vue.js"></script>
<script type="text/javascript" src="vue-router.js"></script>
<div id="app"></div>
<script type="text/javascript">
    var Login = {
        template: `
                <div>登陸成功</div>
            `
    }
    // 安裝路由
    Vue.use(VueRouter);

    // 創建路由
    var router = new VueRouter({
            // 配置路由對象
            routes: [
                {path: '/login', component: Login}
            ]
        }
    );

    // 使用路由組件
    new Vue({
            el: '#app',
            router,
            template: `
                <div>
                    <p>留坑使用路由組件</p>
                    <router-view></router-view>
</div>
            `
        }
    )

</script>
</body>
</html>

網站標題：Vue入門十一、路由的使用
文章鏈接：http://m.kartarina.com/article20/pipjjo.html

成都網站建設公司_創新互聯，為您提供企業網站制作、網站設計公司、搜索引擎優化、外貿網站建設、域名注冊、品牌網站設計

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源：創新互聯

猜你還喜歡下面的內容

Vue入門十一、路由的使用

一、vue-router使用

二、代碼示例

Vue入門十一、路由的使用