一.Vue Router路由管理器的使用

案例效果:

一.使用步驟:
定義一個html結構:

    <div id="app">
        <!-- 入口:使用router-link元件來導航,它會解析為a標籤 -->
        <router-link to="/man">男</router-link>
        <router-link to="/women">女</router-link>

        <!-- 出口:渲染內容 -->
        <router-view
 
></router-view>
    </div>

先匯入vue和vue-router檔案,可以自己下載在本地匯入,但前後文件不能顛倒,要先匯入vue在vue-router,不然會報錯,官方線上匯入如下:

1.寫元件

      const Man= {//物件
            template:'<div>我是男生</div>'
        };
        const Women={
            template:'<div>我是女生</div>'
        };

2.寫路由規則(配置路由單詞用的是routes)

        const routes =[//陣列,裡面存物件,物件包含path和component(元件)屬性
            {
                path:"/man",//寫to的路徑名
                component:Man//寫元件名
        },
        {
            path:"/women",
            component:Women
        }
        ]

3.例項化路由物件,傳入規則(路由物件單詞是用的router)

    const router =new VueRouter
 
({//裡面傳入物件
            routes//相當與於routes:routes
            // routes:routes123//屬性名一定要routes,值名可以自己寫和路由規則一樣就可以了

        })

4.例項化Vue物件,把元素和物件傳入到Vue例項中

        let app=new Vue(
            {
                el:"#app",
                router
            }
        )

二.腳手架的使用(重要,新的開發模式)

1.安裝:執行下面命令

cnpm install -g @vue/cli

2.按提示一步步操作