Vue_路由的使用
2018-08-07 本文已影响0人
Locdee_落地
Vue-router 路由的基本使用
在一个系统或APP中，有多个页面组成，通常会使用Vue中的组件来实现。那么当从一个页面跳转到另一个页面时，通过url路径来实现的，哪个url对应哪个页面，在Vue中通过 vue-router来实现
配合Vue1.0使用的版本的帮助文档地址：
https://github.com/vuejs/vue-router/tree/1.0/docs/zh-cn
配合vue1.0使用的vue-router下载地址：
https://cdnjs.cloudflare.com/ajax/libs/vue-router/0.7.10/vue-router.min.js
配合Vue2.0使用的版本的帮助文档地址：
http://router.vuejs.org/zh-cn/installation.html
配合Vue2.0使用的vue-router下载地址：
https://unpkg.com/vue-router/dist/vue-router.js
Vue-router在vue2.0中的使用
<!-- 引入vue2.0和vue-router -->
<script src="vue2.js"></script>
<script src="vue-router.js"></script>
<body>
<!-- 定义模板 -->
<div id="app">
<router-link to="/login">登录</router-link>
<router-link to="/register">注册</router-link>
<!-- 占位符 -->
<router-view></router-view>
</div>
</body>
<script type="text/javascript">
// 定义根组件
var App = Vue.extend()
// 定义注册组件
var register = Vue.extend({
template:"<h2>注册...</h2>"
})
// 定义登录组件
var login = Vue.extend({
template:"<h2>登录...</h2>"
})
// 定义路由并注册路由规则
var vueRouter = new VueRouter({
routes:[
{path:'/',redirect:'/login'},
{path:'/login',component:login},
{path:'/register',component:register},
]
})
// 使用路由
new Vue({
el:"#app",
router:vueRouter
})
</script>
