Vue路由

和锚点相识；

在模块化的开发中，需要手动明确安装路由功能：

import Vue from "vue"
import VueRouter from "vue-router"
Vue.use(VueRouter)

    var haha={
        template:'<h3>哈哈</h3>'
    }
    var hehe={
        template:'<h3>呵呵</h3>'
    }
    var xixi={
        template:'<h3>嘻嘻</h3>'
    }
    var rtobj=new VueRouter({
        routes: [
            {path:'/',redirect:'/haha'},  这条表示如果地址为根目录，则重新跳转为'/haha'地址
            {path:'/haha',component: haha},
            {path:'/hehe',component: hehe},
            {path:'/xixi',component: xixi}
        ]
    })
    var vm=new Vue({
        el:'#app',
        router: rtobj,
    })

其中在VueRouter的实例中，path（路径地址）和component（组件对象）这两个参数是必须的

注意：在component中的值为一个组件对象

正确的
var login ={
    template:'<p>xxx</p>
}

错误的
Vue.component('login',{
    template:'<p>xxx</p>
}

注：记得在Vue的实例中使用router：xx 来挂载这个VueRouter实例对象

 

最后只需要在页面中相关联的div里

<div id="app">
    <router-link to="/haha" tag='span'>哈哈</router-link>
    <!--router-link在页面上默认渲染为a标签，也可以使用tag来改变其标签-->
    <router-link to="/hehe">呵呵</router-link>
    <!-- 相当于<a href='#/hehe'>呵呵</a> -->
    <router-link to="/xixi">嘻嘻</router-link>
    <router-view></router-view> 可以让路由在此显示
</div>