1.首先我們要引入vue文件和vue-router文件，可以用在線的cnd鏈接

 <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

會(huì)在全局暴露VueRouter這個(gè)方法,

• 然后我們要定義好待顯示的組件

    var Home={
        template:`<div><h1>home組件
</h1></div>`   
    }
    var About={
        template:`<div><h1>About組件</h1></div>`
    }

• 定義好路由映射關(guān)系

 var routes=[//路線
        //路由表。里面很多路由規(guī)則，component：組件名，path路徑,數(shù)組，里面是一個(gè)個(gè)對(duì)象
        {path:'/home',component:Home,name:'home'},
        {path:'/about',component:About,name:'about'},
        {path:'',component:Home,name:'index'},//默認(rèn)訪問(wèn)時(shí)的組件,但是傳統(tǒng)是a鏈接跳轉(zhuǎn)，底層是錨點(diǎn)
    ]

• 實(shí)例化路由器

 var router=new VueRouter({
        routes:routes,//路由器,屬性名屬性值一致可以簡(jiǎn)寫成一個(gè)
    })//參數(shù)為路由映射表

• 注冊(cè)路由器

var vm = new Vue({
        el: '#box',   
        router:router,//注冊(cè)路由器，可以簡(jiǎn)寫成一個(gè) 
    })

• 在實(shí)例化的地方box，顯示

<div id="box">
 <router-view></router-view>
</div>

打開(kāi)頁(yè)面后啥也沒(méi)有，但是地址欄會(huì)出現(xiàn)

//看到這樣已經(jīng)配置成功
    // http://localhost:63342/code/myWorks/mytest/thirdWeek/day2/pmVueRouterTest/vueRouter.html?_ijt=3slbjgsnnnmv6h51omuqds3qdc#/
    /**
     * 在尾部加home,about可以顯示相應(yīng)的內(nèi)容，但是應(yīng)該是在頁(yè)面初次加載就顯示，而不是手動(dòng)地址欄輸入
     * */

那我們就加上a標(biāo)簽好了。

<div id="box">
    <!--設(shè)置spa應(yīng)用，顯示-->
    <!--    active點(diǎn)中時(shí)候是這個(gè)狀態(tài)，就不能使用a鏈接的描點(diǎn)跳轉(zhuǎn)，router-link-->
    <ul>
        <li><a href="#/home">1</a></li>
        <li><a href="#/about">2</a></li>
    </ul>
 
    <router-view></router-view>
    <!--    最后-->
</div>

這樣就能點(diǎn)到哪里跳哪里。但是a標(biāo)簽局限還是有的，我們可以用vue-router給我們的一個(gè)標(biāo)簽router-link。
這個(gè)標(biāo)簽還挺神奇的，

  <li><router-link to="/home" tag="button">2</router-link></li>
        <li><router-link to="/about">3</router-link></li>

image.png

你可以通過(guò)修改這個(gè)改變它被點(diǎn)擊時(shí)候的樣式，若你不想用這個(gè)名字
也可以另外設(shè)置點(diǎn)擊時(shí)候的class名

var router=new VueRouter({
        routes:routes,//路由器,可以簡(jiǎn)寫成一個(gè)
        //還可以自定義點(diǎn)擊時(shí)候樣式的類名
        linkActiveClass:'active'
    })//參數(shù)為路由映射表

這個(gè)active的這個(gè)類，就隨你在css設(shè)置樣式了。

• 假如給home加上二級(jí)菜單呢？同時(shí)我點(diǎn)中哪個(gè)就要給我傳值過(guò)來(lái)。

  var Home={
        template:`<div><h1>home組件
<ul>
<li><a href="#/home/aa/1">哈哈</a></li>
<li><a href="#/home/aa/2">哈哈哈</a></li>
<li><a href="#/home/aa/3">哈哈哈</a></li>
</ul>
</h1></div>`

比如我要點(diǎn)擊哪個(gè)選項(xiàng)，就會(huì)給我在當(dāng)前頁(yè)輸出這個(gè)id，那我來(lái)定義一下，點(diǎn)擊二級(jí)菜單時(shí)候會(huì)出現(xiàn)的頁(yè)面是什么樣的

  //$route模型變量是vue-router封裝好的，主鍵實(shí)例對(duì)象就存在，route.params獲取動(dòng)態(tài)路由相關(guān)參數(shù)，id取決于之前明明
    var detral={
        template:`<div><h1>新聞峽谷情 id=</h1></div>`
    }

然后在設(shè)置一條路由

{path:'/home/aa/:id/',component:detral,name:'aa'}
//此時(shí)：id的這個(gè)名稱隨意，但是一定要冒號(hào)。這里設(shè)置名稱叫id，這里的id為路由動(dòng)態(tài)參數(shù)

然后再定義的模板里面拿到這個(gè)參數(shù)

 //$route模型變量是vue-router封裝好的，主鍵實(shí)例對(duì)象就存在，route.params獲取動(dòng)態(tài)路由相關(guān)參數(shù)，id取決于之前明明
    var detral={
        template:`<div><h1>新聞峽谷情 id={{$route.params.id}}</h1></div>`
    }

同樣你可以設(shè)置多個(gè)參數(shù)

 var Home={
        template:`<div><h1>home組件
<ul>
<li><a href="#/home/aa/1/jingrong">哈哈</a></li>
<li><a href="#/home/aa/2/xixi">哈哈哈</a></li>
<li><a href="#/home/aa/3/lala">哈哈哈</a></li>
</ul>
</h1></div>`

路由表里面

{path:'/home/aa/:id/:type',component:detral,name:'aa'}

模板修改

 var detral={
        template:`<div><h1>新聞峽谷情 id={{$route.params.id}}{{$route.params.type}}</h1></div>`
    }

這個(gè)時(shí)候做完你會(huì)發(fā)現(xiàn)一個(gè)小bug，它點(diǎn)擊之后是渲染在一級(jí)菜單管理下的區(qū)域，會(huì)覆蓋的，所以我們只想讓它在特定區(qū)域顯示的話只能通過(guò)路由嵌套了。

模板改成這樣

  var Home={
        template:`<div><h1>home組件
<ul>
<li><a href="#/home/aa/1/jingrong">哈哈</a></li>
<li><a href="#/home/aa/2/xixi">哈哈哈</a></li>
<li><a href="#/home/aa/3/lala">哈哈哈</a></li>
</ul>
<div>詳情在這里顯示<router-view></router-view></div>

</h1></div>`

路由改寫,嵌套一個(gè)子路由

 {path:'/home',component:Home,name:'home',children:[
            //這個(gè)path不能加上/，因?yàn)樗鼘⑦@個(gè)path和父級(jí)的/home拼接,嵌套路由,讓它在該顯示的地方顯示
                { path:'aa/:id/:type',component:detral,name:'aa'},
            ]},

如果我們想要在about這個(gè)模板有個(gè)摁扭，是返回前一頁(yè)呢？就不能用嵌套路由了把，這個(gè)。這個(gè)時(shí)候就要用路由函數(shù)了

 var About={
        methods:{
            goback:function () {
                //跳轉(zhuǎn)到home
                // this.$router.push('/home');//會(huì)跳轉(zhuǎn)到home，路由參數(shù)是$route.params
                //push的路由參數(shù)是路由表里面的path
                // this.$router.back();//后退一步，自帶的，從哪來(lái)，回哪去
                // this.$router.go();//history證書(shū)向前,負(fù)數(shù)向后,有問(wèn)題
            }
        },
        template:`<div><h1>About組件</h1>
<button @click="goback">回到首頁(yè)</button>
</div>`
    }

綁定摁扭的事件后再methods里面設(shè)置$router自帶的函數(shù)。