Vue一级路由配置
2017-12-29 本文已影响8人
xlayzheng
作用
- 根据url锚点路径，在容器中加载不同的模块
- 完成SPA(single page application)的开发
路由功能引入
- vue-router.js
一级路由的配置
- 引入vue-router.js库
- 创建路由所需模块
合写的形式（用于理解）：
<body>
<div id="box">
<ul>
<li><router-link to="/home">home</router-link></li>
<li><router-link to="/news">news</router-link></li>
<li><router-link to="/video">video</router-link></li>
</ul>
<!--
使用路由完成切管时，不再用a标签
使用<router-link to=""></router-link>来替代a
to = 路由配置时，router数组中path的信息，需要写在此处
<router-view></router-view>
用来占位，放你切换时要展示的内容
-->
<div class="stage">
<router-view></router-view>
</div>
</div>
</body>
---------------------------------js--------------------------------------
<script>
var vm = new Vue({
el:'#box',
data:{},
//添加路由配置项
//router:路由实例（对象）
//设置路由对象的配置项
router:new VueRouter({
//路径信息存放在数组中
routes:[
//path:路径 ‘/小写单词’
{path:'/home',component:{
template:'<h2>首页</h2>'
}},
{path:'/news',component:{
template:'<h2>新闻</h2>'
}},
{path:'/video',component:{
template:'<h2>影音</h2>'
}}
]
})
})
</script>
分写的形式：
- 1.准备路由所需要的模快（组件）
- 全局Vue下，有extend(),用来注册路由所需的模块（组件）
- 模块名称，首字母大写
- 2.配置路径信息 (数组形式)
- 数组名随意,但经常叫routes
- 因为后面路由对象里的配置项就叫routes,可以将routes:routes简写为routes
- 3.创建路由对象
- 同理：我们创建的路由对象也可叫做router,这样在vue实例中定义配置项router：myrouter就可以简写成router了
- 4.添加路由配置项到实例中，与el、data等配置项同级
{path:'/',redirect:'/home'} //路由中配置默认显示页面
<body>
<div id="box">
<ul>
<li><router-link to="/home">home</router-link></li>
<li><router-link to="/news">news</router-link></li>
<li><router-link to="/hot">hot</router-link></li>
</ul>
<div class="stage">
<router-view></router-view>
</div>
</div>
<template id="home">
<div class="homeWrap">
<h2>首页</h2>
<ul>
<li>line one</li>
<li>line two</li>
<li>line three</li>
</ul>
</div>
</template>
</body>
--------------------------js-------------------------------
<script>
//1.准备路由所需要的模快（组件）
//全局Vue下，有extend(),用来注册路由所需的模块（组件）
//模块名称，首字母大写
var Home=Vue.extend({
template:'#home'
});
var News=Vue.extend({
template:'<h1>news</h1>'
});
var Hot=Vue.extend({
template:'<h1>hot</h1>'
});
//2.配置路径信息 (数组名随意,但经常叫routes)
//应为后面实例里的配置项就叫routes,可以将routes:routes简写为routes
var routes = [
{path:'/',redirect:'/home'}, //配置默认显示页面
{path:'/home',component:Home},
{path:'/news',component:News},
{path:'/hot',component:Hot},
]
//3.创建路由对象
//同理：我们创建的路由对象也可叫做router,这样在vue实例中定义配置项router：myrouter就可以简写成router了
var myrouter=new VueRouter({
//配置项
//routes:存储路径信息的数组
routes
})
//4.添加路由配置项到实例中
var vm = new Vue({
el:'#box',
data:{},
router:myrouter
})
</script>
通过name属性来指明加载组件
{
path:'/Vinci',
name:'two',
component:{
template:'#box2'
}
},
<router-link class='list-group-item' href='javascript:;' to='/Vinci'>达·芬奇</router-link>
改为：
<router-link class='list-group-item' href='javascript:;' :to='{name:"two"}'>达·芬奇</router-link>
-
to='/Vinci'→:to='{name:"two"}'
（动态绑定to属性，值为一个包含name键值对的对象）
