cdn方式的vue路由使用

首先引入cdn:

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.staticfile.org/vue-router/2.7.0/vue-router.min.js"></script>

引入cdn後便可以開始編寫路由的入口和出口了：

<!-- 路由入口，這裏將會在瀏覽器被渲染成a標籤，點擊不同的入口將會在路由的出口渲染出匹配的組件 -->
<router-link to="/foo">Go to Foo</router-link>
<router-link to="/bar">Go to Bar</router-link>

<!-- 路由出口，點擊路由的入口後，會在這裏渲染出組件 -->
<router-view></router-view>

js代碼爲：

var foo = `<div><h1>這裏是FOO</h1></div>`;
var bar = `<div><h1>這裏是BAR</h1></div>`;
	

var vm = new Vue({
        el: '#app',
        router:new VueRouter({ 
          routes:[ 
            {path:'/',redirect:'/foo'}, // 這個表示會默認渲染foo
            {path:'/foo',component:{template: foo}},
            {path:'/bar',component:{template: bar}}
          ]
        })
})