Vue-路由

前言

---

对于初学者童鞋，在代码出错时，不要急于回去看代码，而是看控制台是否报错，如果报错，再定位。这样迅速的找到错误所在。而不是急于看代码，看了半天也没找到原因。

路由

---

路由是搭建一个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')