非node环境 vue-rouder 学习笔录1

Posted 2020-09-26 财哥说

在非node环境中 需要我们在文本中引入vue.js 和vue-rouders.js
首先引用
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
现在做个简单的例子
<div id="app">
<div>Hello word</div>
<p>
<router-link to="Home">Home</router-link>
<router-link to="Info">Info</router-link>
<router-link to="Content">Content</router-link>
</p>
<router-view></router-view>
</div>
js中代码
<script>
//定义路由组件
const Home={template:"<div>我是首页</div>"}
const Info={template:"<div>我是简介</div>"}
const Content={template:"<div>我是内容</div>"}
//定义路由
const routers=[{path:"Home",component:Home},{path:"Info",component:Info},{path:"Content",component:Content}]
//创建router实例
const router=new VueRouter({
routers//缩写 相当于routers:routers
})
//创建和挂载根实例
const app= new Vue({router}).$mount("#app");
简单的应用就介绍完毕了