vue-router

[Narutocc]

npm install vue-router

<script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>
<script src="https://cdn.bootcss.com/vue-router/2.7.0/vue-router.min.js"></script>
<div id="app">
//使用router-link组件来导航
//通过传入 to 属性指定链接
//<router-link>默认会被渲染成一个<a>标签
<router-link to="/foo">Go to Foo</router-link>
<router-link to="/bar">Go to Bar</router-link>
//路由出口
<router-view></router-view>
</div>
<script>
    //0.如果使用模块化机制编程，导入Vue和VueRouter,要调用Vue.use(VueRouter)
    //1.定义组件，可以从其他文件import进来
    const Foo = {template:'<div>foo</div>'}
    const Bar = {template:'<div>bar</div>'}
    //2.定义路由，通过Vue.extend()创建组件构造器，或者只是一个组件配置对象
    const routes = [
        {path:'/foo',component:Foo},
        {path:'/bar',component:Bar}
    ]
    //3.创建router实例，传'routes'配置
    const router = new VueRouter({
        routes //缩写，相当于 routes:routes
    })
    //4.创建和挂载根实例，记得要通过router配置参数注入路由，从而让整个应用都有路由功能
    const app = new Vue({
        router
    }).$mount('#app')

</script>