Vue--vue-Router

Vue-router

Vue Router是vue.js官方的路由管理器，它和vue.js的核心深度集成，让构建单页面变得非常的简单

Vue-router是vue的一个插件，可以npm，或者CND引用

官网：https://router.vuejs.org/zh/installation.html

要在引用vue之后再引用vue-router

<!--    引用vue-->
<script src="../static/vue.min.js"></script> 

<!--    引用vue-router-->
<script src="../static/vue-router.js"></script>

安装

npm install vue-router

案例：

点击Go To Foo显示我是Foo组件，点击Go To Bar显示我是Bar组件

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>路由管理</title>
    <script src="./node_modules/vue/dist/vue.js"></script>
    <!-- 导入vue-router -->
    <script src="./node_modules/vue-router//dist/vue-router.js"></script>
</head>

<body>

    <div id="app">
        <div class="header">
            <h1>头部</h1>
        </div>
        <div class="left">
            <p>
                <ul>
                    <!-- <li><a href="#/foo">Go Foo</a></li>
                    <li><a href="#/bar">Go Bar</a></li> -->
                    <!-- 
                        官方推荐：
                        通过router-link标签会默认渲染出a标签，
                        其中通过to属性指定跳转链接，不用带上 # 号
                     -->
                     <router-link to="/foo">Go To Foo </router-link><br>
                    <router-link to="/bar">Go To Bar</router-link>
                </ul>
            </p>
        </div>
        <div class="main">
            <!-- 路由出口。固定写法 -->
            <!-- 路由匹配到的组件将渲染在这里 -->
            <router-view></router-view>
        </div>
    </div>


    <script>
        // 1.定义组件
        const Foo = {
            template: `<div>我是Foo组件</div>`
        }
        const Bar = {
            template: `<div>我是Bar组件</div>`
        }

        //    2.配置路由表，当点击指定url时，显示对应的那个组件
        const router = new VueRouter({
            routes: [ // 注意单词，是routes，不是router
                { "path": '/foo', component: Foo },
                { "path": "/bar", component: Bar }

            ]
        })

    // 3.将路由注册到实例中
    new Vue({
        el: "#app",
        router // router:router
    })
    </script>

</body>

</html>