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}}
          ]
        })
})