- 引入路由文件
<script src="./vue-router.js"></script>
2.准备路由需要的组件
var index = Vue.component('index', {
template: '<div>首页</div>'
})
var productType = Vue.component('productType', {
template: '<div>这里显示商品编号</div>'
})
3.创建路由对象
4.配置路由规则
var router = new VueRouter({
// 4. 通过routes属性配置路由规则,它是一个数组,数组中放的是对象,每个对象对应一条规则,并且每个对象里面都包含有name(表示路由规则的名称)/path(表示路径)/component(表示路径对应的组件)
routes: [
{name: 'index', path: '/index', component: index},
{name: 'productType', path: '/product_type', component: productType}
]
})
5.在vue实例中注入路由,这样整个应用程序都会拥有路由了
var vm = new Vue({
el: '#app',
router,
data: {}
}