Vue-router的基本使用
1 路由的安装
1.1直接下载 / CDN
https://unpkg.com/vue-router/dist/vue-router.js
或者直接通过script标签引入,它会自动安装的
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router@2.0.0/dist/vue-router.js"></script>
(注意这两个标签是有顺序的,因为vue-router要通过vue提前安装$http)
2.1也可以直接通过npm命令安装
npm install vue-router
如果在一个模块化工程中使用它,必须要通过 Vue.use() 明确地安装路由功能:
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
2.路由的基本使用
创建一个路由对象,当导入 vue-router包之后,在window全局对象中, 就有了一个路由的构造函数,叫做VueRouter, 在new一个VueRouter对象,可以为构造函数,传递一个配置对象
这个routes是路由的匹配规则,每个路由规则,都是一个对象,这个规则对象,身上有有两个必须的属性
属性1:path表示监听哪个路由链接地址;
属性2:是component,表示如果路由是前面匹配到的path,则表示component属性对应的那个属性
var routerObj =new VueRouter ({
routes:[
//注意:compontent的属性值,必须是一个组件的模板对象,不能是组件的引用名称;
{path: '/login', component: login},
{path: '/register', component: register}
]
})
3 将一个路由注册到一个vm实例中去
var vm = new Vue({
el:'#app',
data:{
},
methods:{
},
router: routerObj
// 将路由规则对象,注册到vm实例上,用来监听URL,地址变化,然后展示对应组件
});
4 在html文件中通过router-view来将路由匹配到的组件将渲染在这里
<router-view></router-view>