Vue笔记--Router路由--VueRouter--一、基本使用方法

Vue Router 提供一个VueRouter构造函数

Vue官方路由插件 需要安装vue-router插件，且必须依赖于vue.js

VueRouter提供两个组件<router-link>和<router-view>

• <router-link>用来进行路由跳转的按钮（导航），页面渲染之后会默认为a标签，可以通过配置 tag
  属性生成别的标签，to属性设置目标路径
• <router-view>视图组件

一、vueRouter的基本使用方法：

• 通过new VueRouter()创建实例
• 配置VueRouter选项规则
• 挂载在vue实例上，通过router属性注入路由

示例

    <div id="app">
        <!-- 设置router组件 -->
        <router-link to='/'>首页</router-link>
        <router-link to='/title'>主题</router-link>
        <router-link to='/content'>内容</router-link>

        <router-view></router-view>
    </div>

	<script src="./node_modules/vue/dist/vue.js"></script>
    <script src="./node_modules/vue-router/dist/vue-router.js"></script>
    <script>
        // 路由的选项配置（也可也放在VueRouter实例内部）
        const routes = [{
        		// path是导航的路径和to的路径相对应
                path: '/',
                component: {
                	// 配置模板，router-view组件内的数据
                    template: `<div>首页展示</div>`
                }
            },
            {
                path: '/title',
                component: {
                    template: `<div>主题展示</div>`
                }
            },
            {
                path: '/content',
                component: {
                    template: `<div>内容展示</div>`
                }
            },
        ]
        // 创建VueRouter实例，并配置选项
        const router = new VueRouter({
            routes
        })
        // 挂载在vue实例上，通过router属性注入路由
        new Vue({
            el: '#app',
            router
        })
    </script>