vue.js利用vue.router创建前端路由

时间：2021-11-15 10:19:02

node.js方式:

利用node.js安装vue-router模块

cnpm install vue-router

安装完成后我们引入这个模板！

下载vue-router利用script引入方式:

我们也可以把vue-router下载下来

附上地址:https://unpkg.com/vue-router/dist/vue-router.js

在html里用<script>加载！

我们就以script为例

首先我们要引入vue.js在引入vue-router.js

vue-router.js依赖于vue.js

HTML:

<script type="text/javascript" src="vue.js></script>
<script type="text/javascript" src="vue-router.js></script>

<div id="app">

<h1>Hello router.js!</h1>

<!-- 使用 router-link 组件来导航. -->

<!-- 通过传入 `to` 属性指定链接. -->

<!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->

<router-link to="/router1">路由一</router-link>   <!------当我们点击这标签，它会触发router1路由，然后会在router-view渲染出我们定义的组件，我们地址栏也会多出/router1-->

<router-link to="/router2">路由二</router-link>

<router-view></router-view>  //  <-----这个是 我们路由要渲染地方，如果我们没有router-view这个标签，我们的路由就无法渲染到页面-->

</div>

JS:

第一步定义组件:

var router1 = {template:<div>我是路由组件一号</div>}

var router2 = {template:<div>我是路由组件二号</div>}

第二步定义路由:

var routers = [

{path:"/router1",component:router1},

{path:"/router2",component:router2}

]

第三步创建路由的实例

var router = new VueRouter({

routers                                             //routers=routers

})

第四步创建和挂载实例

var vm = new Vue({

router

}).$mount("#app")

<!---最后附上router.js完整的教程地址---->

附上地址: http://router.vuejs.org/zh-cn/essentials/getting-started.html

相关文章