在非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");

简单的应用就介绍完毕了