前言
对于初学者童鞋,在代码出错时,不要急于回去看代码,而是看控制台是否报错,如果报错,再定位。这样迅速的找到错误所在。而不是急于看代码,看了半天也没找到原因。
路由
路由是搭建一个app的骨架。
首先我们需要引入 vue.js 和 vue-router.js。
<script src="https://unpkg.com/vue/dist/vue.js"></script><script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
html
<div id="app">
<h1>hello vue</h1>
<p>
<router-link to="/index">go to index</router-link>
<router-link to="/shop">go to shop</router-link>
</p>
<router-view></router-view>
</div>
js代码
//1.定义(路由)组件
const Index = { template: '<div>index</div>'}
const Shop = { template: '<div>shop</div>'}
//2.定义路由
const routes = [
{ path: '/index',component: Index },
{ path: '/shop',component: Shop}
]
//3.创建router实例
const router = new VueRouter({
routes
})
//4.创建和挂载根实例
const app = new Vue({
router
}).$mount('#app')