http://10.0.0.1/
http://10.0.0.1/about
http://10.0.0.1/concat

<div id="app">
    <a href="#/home" rel="external nofollow" >home</a>
    <a href="#/about" rel="external nofollow" >about</a>
    <div id="router-view"></div>
</div>

<script>
    const routerView = document.querySelector('#router-view');
    // url的hash
    // URL的hash也就是錨點(diǎn)，本質(zhì)上就是改變window.location 的 href 屬性
    // 我們可以通過(guò)直接賦值location.hash 來(lái)改變 href 但是頁(yè)面不會(huì)刷新
    window.addEventListener('hashchange',()=>{
        console.log(location.hash);
        if(location.hash==="#/home"){
            routerView.innerHTML = "home";
        }else if(location.hash==="#/about"){
            routerView.innerHTML = "about";
        }
    })
</script>

<div class="nav">
    <a onclick="linkTo(1)">link1</a>
    <a onclick="linkTo(2)">link2</a>
</div>
<div id="router-view">
</div>

<script>
    var view = document.getElementById('router-view');
    function linkTo(link){
        switch(link) {
            case 1: {
                window.history.pushState({a:1}, 'mylink1', '/link1');
                view.innerHTML = 'link1 content';
                break;
            }
            case 2: {
                window.history.pushState({a:1}, 'mylink2', '/link2');
                view.innerHTML = 'link2 conetnt';
                break;
            }
            default: 
                return;
        }
        return false;
    }
</script>

VueRouter下載地址 : https://unpkg.com/vue-router/dist/vue-router.js

<script src="https://unpkg.com/vue-router@2.0.0/dist/vue-router.js"></script>

npm i vue-router

<template>
    <div>
        <!-- router-link相應(yīng)于a標(biāo)簽，to相當(dāng)于href,指要單擊跳轉(zhuǎn)到顯示那個(gè)組件的內(nèi)容 ，最終瀏覽器還是會(huì)把router-link解析為a標(biāo)簽-->
        <router-link to="/about">關(guān)于我們</router-link>
        <router-link to="/news">新聞</router-link>
    </div>
</template>

<template>
    <!-- ... -->
    <div class="container">
        <!-- router-view指定顯示路由導(dǎo)航內(nèi)容的位置，也就是單擊【關(guān)于我們】或【新聞】連接的內(nèi)容都在router-view組件指定位置顯示 -->
        <router-view></router-view>
    </div>
</template>

<style>
    .container {
        background-color:blanchedalmond;
        margin-top: 10px;
        width: 600px;
        height: 300px;
    }
</style>

<template>
	<h3>關(guān)于我們</h3>
</template>

<template>
	<h3>最熱新聞</h3>
</template>

import Vue from 'vue'
import VueRouter from 'vue-router'
import Films from '@/components/About'
import Cinemas from '@/components/News'
// 注冊(cè)路由插件, 兩個(gè)全局 router-view router-link
Vue.use(VueRouter) 
// 配置表,有多條路由時(shí)，通常定義為一個(gè)常量數(shù)組，里面每個(gè)對(duì)象就是一個(gè)路由
const routes = [
    // 定義路由格式：path指定路由的url，component指定當(dāng)單擊path指定的url時(shí)顯示哪個(gè)組件內(nèi)容。
    { path: '/about', component: About },
    { path: '/news', component: News }
]
//能new VueRouter就是因?yàn)橐肓藇ue-router.js。
export default new VueRouter({
    // routes:routes//左邊routes為要設(shè)置的路由選項(xiàng)routes，右邊routes為選項(xiàng)值，名字當(dāng)然可以不同，但是一般設(shè)置為相同。第2步不單獨(dú)定義，直接寫(xiě)在routes里也可以
    routes,
    mode:'history',
    linkActiveClass:'active'
});

import router from './router'
//創(chuàng)建vue根實(shí)例，并將上面的路由實(shí)例掛載到vue實(shí)例上，也稱(chēng)為注入路由，就是告訴vue實(shí)例有這么一個(gè)路由了。
//怎么告訴呢？通過(guò)router選項(xiàng)
var vm = new Vue({
    el: "#app",
    // router:router//同樣:左右兩邊名稱(chēng)相同，可以簡(jiǎn)寫(xiě)
    router//注入路由
})    

const router = new VueRouter({
    routes,
    mode:'history'
})

<a class="router-link-exact-active rotuer-link-active">關(guān)于我們</a>

.rotuer-link-active{
    font-size:20px;
    color:red;
    text-decoration: none;
}

const router = new VueRouter({
    routes,
    mode:'history',
    linkActiveClass:'active'
})

const routes = [
    { path: '/about', component: About },
    { path: '/news', component: News },
    {path:'*',redirect:'/about'}//*表示找不到路由時(shí)，重定向到about
]

<router-link to="/account/login" tag="button">登錄</router-link>

<router-link custom to="/account/login" custom v-slot="{ isActive,navigate-}">
    <buttton @click="navigate">我是路由自定義標(biāo)簽</buttton>
</router-link>
<!-- 
 custom 屬性的意思，就是允許自定義標(biāo)簽，如果不寫(xiě)就會(huì)定義成 a 標(biāo)簽
 navigate 導(dǎo)航的觸發(fā)函數(shù)
 isActive 是否匹配的狀態(tài)
-->

export default [
   {id: 1, title: '三體', desc: '三個(gè)天體在互相引力的作用下互相圍繞運(yùn)行，其運(yùn)行軌跡將產(chǎn)生不可預(yù)測(cè)的混沌。'},
   {id: 2, title: '蛤蟆先生去看心理醫(yī)生', desc: '蛤蟆先生一向愛(ài)笑愛(ài)鬧，如今卻一反常態(tài)地郁郁寡歡。'},
   {id: 3, title: '活著', desc: '人是為了活著本身而活著的，而不是為了活著之外的任何事物而活著。'}
]

<template>
    <div>
        <h3>圖書(shū)列表</h3>
        <ul>
            <li v-for="book in books" :key="book.id">
                <router-link to="/books/book/">{{book.title}}</router-link>
            </li>
        </ul>
        <!--Book組件在這里渲染-->
        <router-view></router-view>
    </div>
</template>

<script>
import Books from '@/assets/books'
    
 export default {
     data(){
         return {books:Books}
     }
 }
</script>

<template>
	<div>
        圖書(shū)詳情頁(yè)面
    </div>
</template>

<script>
    export default {
        data(){
            return {
            }
        }
    }
</script>

import Book from '@/components/Book'
//...
const routes = [
    //...
    {
      path: '/books',
      component: Books,
      children: [
        {path: 'book', component: Book}
      ]
    },
]

book?id=1

<!-- book.vue -->
<template>
	<h4>這里是Book頁(yè)面內(nèi)容,獲取參數(shù):{{this.$route.query}},圖書(shū)ID ：{{this.$route.query.id}}</h4>
</template>
<script>
    export default {
    }
</script>

<router-link to="/books/book/1">注冊(cè)</router-link>

children: [{ //books下的子路由
    path: 'book/:id',
    component: Book
}]

<!-- book.vue -->
<template>
	<h4>這里是Book頁(yè)面內(nèi)容,獲取參數(shù):{{this.$route.params}},圖書(shū)ID ：{{this.$route.params.id}}</h4>
</template>
<script>
    export default {
    }
</script>

<!-- book.vue -->
<template>
	<h4>這里是Book頁(yè)面內(nèi)容,獲取參數(shù):{{this.$route.params}},圖書(shū)ID ：{{this.$route.params.id}},路由路徑{{$route.path}}</h4>
</template>
<script>
    export default {
    }
</script>

<!-- 注意 to屬性使用了數(shù)據(jù)綁定，才可以使用動(dòng)態(tài)的book.id -->
<router-link :to="'/books/book/'+book.id">{{book.title}}</router-link>

<template>
    <div>
        <p>圖書(shū)ID：{{ book.id }}</p>
        <p>書(shū)名：{{ book.title }}</p>
        <p>說(shuō)明：{{ book.desc }}</p>
    </div>
</template>

<script>
import Books from '@/assets/books'
export default {
    data(){
        return {
            book: {}
        }
    },
    //寫(xiě)在created中是為了模擬ajax請(qǐng)求。
    created(){
        this.book = Books.find((item) => item.id == this.$route.params.id);
    }
}
</script>

created(){
    this.book = Books.find((item) => item.id == this.$route.params.id);
},
watch: {
    '$route' (to) {
        this.book = Books.find((item) => item.id == to.params.id);
     }
} 

watch: {
    '$route': {
        handler: function(to) {
            this.book = Books.find((item) => item.id == to.params.id);
        },
        immediate: true
    } 
}

this.$router.push('/account/register')
this.$router.push({path:'/account/register'})

this.$router.push({
    //想跳到哪里就設(shè)置相應(yīng)的路由，并傳遞參數(shù)信息。比如跳到注冊(cè)頁(yè)面/account/register也行
    path:'/account/login',query:{name:this.name,pwd:this.pwd}
})

<template id="tmplogin">
    <form action="">
        <div>
            <h4>歡迎來(lái)到登錄頁(yè)面，請(qǐng)輸入登錄信息</h4>
            用戶(hù)名：<input type="text" name="name" v-model="name" /><br>
            密碼：<input type="password" name="pwd" v-model="pwd" /><br>
            <input type="submit" value="提交" @click="submit">
        </div>
    </form>
</template>

const login = {
    template: '#tmplogin',
    data: {
        return: {
            name: '',
            pwd: ''
        }
    },
    methods: {
        submit() {
            this.$router.push({
                //想跳到哪里就設(shè)置相應(yīng)的路由，并傳遞參數(shù)信息。比如跳到注冊(cè)頁(yè)面/account/register也行
                path:'/account/register',query:{name:this.name,pwd:this.pwd}
            })
        }
    },
}
const register = {
            template: '<h4>這里是注冊(cè)頁(yè)面內(nèi)容,獲取傳遞的參數(shù):{{$route.params}},用戶(hù)名：{{$route.params.name}},密碼:{{$route.params.pwd}},路由路徑{{$route.path}}</h4>'
}

children: [{ //account下的子路由
    path: 'login',
    component: login
}]

<button @click="replace">替換路由</button>

var Account = {
    template: '#tmpaccount', //這里模板內(nèi)容變復(fù)雜了，所以單獨(dú)定義
    methods:{
        replace(){
            this.$router.replace({
                path:'/news'
            })
        }
    }
}

//在歷史記錄中前進(jìn)一步，等同于 history.forward（）
this.$router.go(1);
//后退一步，等同于history.back（）
this.$router.go(-1);
//前進(jìn)兩步記錄
this.$router.go(2);

const routes = [
    { path: '/about',name:'aa', component: About }
]

<router-link :to="{name:'aa'}">關(guān)于我們</router-link>

.container{
    height: 500px;
}
.top {
    background-color:beige;
    width: 100%;
    height: 80px;
}
.left{
    float: left;
    width: 20%;
    height: 100%;
    background-color: burlywood;
}
.right{
    float: left;
    width: 80%;
    height: 100%;
    background-color: aquamarine;
}

const header = {
    template: '<div class="header"> header </div>'
}   
const sidebar = {
    template: '<div class="sidebar">sidebar</div>'
}    
const main = {
    template: '<div class="main"> main </div>'
}   

const header = {
    template: '<div class="header"> header </div>'
}   
const sidebar = {
    template: '<div class="sidebar">sidebar</div>'
}    
const main = {
    template: '<div class="main"> main </div>'
}   

const routes = [{
    path: '/',    //一個(gè)路由對(duì)應(yīng)多個(gè)組件
    components: {
        default: header,//指定什么router-view顯示對(duì)應(yīng)的組件，即指明是在哪個(gè) router-view 標(biāo)簽上加載什么組件。
        sidebar: sidebar,//格式name:component，name為router-view的name
        main: main
    }
}]    

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/vue.js"></script>
    <script src="js/vue-router.js"></script>
    <style>
        .container{
            height: 500px;
        }
        .top {
            background-color:beige;
            width: 100%;
            height: 80px;
        }
        .left{
            float: left;
            width: 20%;
            height: 100%;
            background-color: burlywood;
        }
        .right{
            float: left;
            width: 80%;
            height: 100%;
            background-color: aquamarine;
        }
    </style>
<body> 
    <div id="app">
        <div class="top">
            <!-- 在 router-view 中，默認(rèn)的 name 屬性值為 default -->
            <router-view></router-view>
        </div>       
        <div class="container">
            <div class="left">
                <router-view name="sidebar"></router-view>
            </div>
            <div class="right">
                <router-view name="main"></router-view>
            </div>           
        </div>
    </div>    
    <template id="sidebar">
        <div class="sidebar">
            sidebar
        </div>
    </template>    
    <script>
        // 1、定義路由跳轉(zhuǎn)的組件模板
        const header = {
            template: '<div class="header"> header </div>'
        }   
        const sidebar = {
            template: '#sidebar'
        }    
        const main = {
            template: '<div class="main"> main </div>'
        }   
        // 2、定義路由信息
        const routes = [{
            path: '/',    //一個(gè)路由對(duì)應(yīng)多個(gè)組件
            components: {
                default: header,//指定什么router-view顯示對(duì)應(yīng)的組件，即指明是在哪個(gè) router-view 標(biāo)簽上加載什么組件。
                sidebar: sidebar,//格式name:component，name為router-view的name
                main: main
            }
        }]    
        const router = new VueRouter({
            routes
        })    
        // 3、掛載到當(dāng)前 Vue 實(shí)例上
        const vm = new Vue({
            el: '#app',
            data: {},
            methods: {},
            router: router
        });
    </script>
</body>
</html>

```bash
//定義路由 ? ? ?
const router = new VueRouter({
? ? routes: [{ ? //定義路由?
? ? ? ? path: '/myRouter/:id', //路由規(guī)則通過(guò)占位符指明傳遞的參數(shù)為id，同時(shí)id要為上面組件props選項(xiàng)中有的值
? ? ? ? component: mycomp,
? ? ? ? props: true //此處props要設(shè)置為true，即可以實(shí)現(xiàn)組件與Vue Router之間的解耦
? ? }]
})

//定義組件
const mycomp = {
    props: ['id'],
    //此處沒(méi)有通過(guò)$route.params.id方式獲取參數(shù)id，也就不需要router實(shí)例
    template: '<h3>組件獲取到了路由傳遞的參數(shù)：{{id}}，但此處并沒(méi)有通過(guò)$route去獲取。 </h3>' /
}  

<style>
    .container {
        background-color:blanchedalmond;
        margin-top: 10px;
        width: 600px;
        height: 300px;
    }
</style>
<body>
    <div id="app">
        <button type="button" @click="goMethod">路由與組件解綁示例1</button>
        <div class="container">
            <router-view></router-view>
        </div>
    </div>
    <script>
        //定義組件
        const mycomp = {
            props: ['id'],
            template: '<h3>組件獲取到了路由傳遞的參數(shù)：{{id}}，但此處并沒(méi)有通過(guò)$route去獲取。 </h3>' //此處沒(méi)有通過(guò)$route.params.id方式獲取參數(shù)id，也就不需要router實(shí)例
        }  
        //定義路由      
        const router = new VueRouter({
            routes: [{   //定義路由 
                path: '/myRouter/:id', //路由規(guī)則通過(guò)占位符指明傳遞的參數(shù)為id，同時(shí)id要為上面組件props選項(xiàng)中有的值
                component: mycomp,
                props: true //此處props要設(shè)置為true，即可以實(shí)現(xiàn)組件與Vue Router之間的解耦
            }]
        })
        const vm = new Vue({
            el: '#app',
            data: {},
            methods: {
                goMethod() { //該方法實(shí)現(xiàn)路由跳轉(zhuǎn)，跳轉(zhuǎn)到myRouter，并傳入?yún)?shù)123
                    this.$router.push({
                        path: '/myRouter/123' //param方式傳參
                    })
                }
            },
            router
        })
    </script>
</body>

//定義路由      
const router = new VueRouter({
    routes: [{   //定義路由 
        path: '/myRouter/:id', //路由規(guī)則通過(guò)占位符指明傳遞的參數(shù)為id，同時(shí)id要為上面組件props選項(xiàng)中有的值
        component: mycomp,
        props:{
            id:'123' //組件獲取到的是這里的值
        }
    }]
})

//定義組件
const mycomp = {
    props: ['id'],
    template: '<h3>組件獲取到了路由傳遞的參數(shù)：{{id}}，但此處并沒(méi)有通過(guò)$route去獲取。 </h3>' 
}  
//定義路由      
const router = new VueRouter({
    routes: [{   //定義路由 
        path: '/myRouter/:id', //路由規(guī)則通過(guò)占位符指明傳遞的參數(shù)為id，同時(shí)id要為上面組件props選項(xiàng)中有的值
        component: mycomp,
        props:{
            id:'123' //組件獲取到的是這里的值
        }
    }]
})
const vm = new Vue({
    el: '#app',
    data: {},
    methods: {
        goMethod() { //該方法實(shí)現(xiàn)路由跳轉(zhuǎn)，跳轉(zhuǎn)到myRouter
            this.$router.push({
                path: '/myRouter/123456'//param方式傳參,隨便寫(xiě)參數(shù)，但是必須有
            })
        }
    },
    router
})

//定義組件
const mycomp = {
    props: ['id', 'name'],
    template: '<h3>組件獲取到了路由傳遞的參數(shù)：{{id}}——{{name}}，但此處并沒(méi)有通過(guò)$route去獲取。 </h3>' 
}
//定義路由      
const router = new VueRouter({
    routes: [{   //定義路由 
        path: '/myRouter', 
        component: mycomp,
        props: route => ({
            id: route.query.id,//獲取到通過(guò)路由傳遞的參數(shù)，這個(gè)就可以是動(dòng)態(tài)的
            name: 'zhangsan'//這個(gè)是靜態(tài)的
        })
    }]
})
const vm = new Vue({
    el: '#app',
    data: {},
    methods: {
        goMethod() { //該方法實(shí)現(xiàn)路由跳轉(zhuǎn)，跳轉(zhuǎn)到myRouter
            this.$router.push({
                path: '/myRouter?id=123'//query方式傳參
            })
        }
    },
    router
})