Vue路由

一.路由
1.vue中的路由也是根据用户提交不同的路径参数,显示不同的页面内容.
2.安装并使用
->直接引入
<script src="vue-router.js"></script>
->也可以用npm 安装.
npm install vue-router --save-dev
注意:如果使用模块化方式开发,导入Vue和VueRouter,并且调用Vue.use(VueRouter),如果你使用全局的script标签引入的话,则不需要use()方法.
注意:以下代码示例为vue 2.x版本
->使用
1).定义路由组件(如果是模块化开发的话,可以直接import引入*.vue)
const wsw = {
template:'<h1>无所谓</h1>'
}
2).定义路由(每个路由应该映射一个组件)
const routes = [
{path:'/',component:wsw},
{path:'/find',component:find},
{path:'/me',component:me}
]
3.创建router实例,然后配置
const router = new VueRouter({
routes // es6的写法,相当于es5的routes:routes
})
4.创建和挂载根实例
const vm = new Vue({
router:router
}).$mount('#myApp')
5.html部分(<router-view></router-view>和<router-link></router-link>)
<div id="myApp">
<!-- 路由内容显示区域 -->
<router-view></router-view>
<ul>
<li><router-link to="/">消息</router-link></li>
<li><router-link to="/connect">联系人</router-link></li>
<li><router-link to="/message">动态</router-link></li>
</ul>
</div>
3.二级路由
->要在一级路由下面配置跳转路径
var connect = {
template:`
<div>
<h1>我是联系人的页面</h1>
<router-view></router-view>
<ul>
<li> <router-link to="/hong">小红</router-link> </li>
<li> <router-link to="/ming">小明</router-link> </li>
</ul>
</div>
`
};
->声明二级组件
var hong = {
template:'<h2>我是联系人小红的页面</h2>'
};
var ming = {
template:'<h2>我是联系人小明的页面</h2>'
}
->在路由配置里,配置二级路由
{path:'/connect',component:connect,children:[
{path:'/hong',component:hong},
{path:'/ming',component:ming}
]}
3.手动切换路由
router.push({path:'/me'});

二.vue脚手架vue-cli
1.什么vue-cli
vue-cli是vue.js的脚手架,用于自动生成vue.js工程模板的.
2.安装
->全局安装
npm install vue-cli -g
或者
cnpm install vue-cli -g
->查看是否安装成功
vue -V(大写的V)
3.使用
->生成项目名是wsw的模板
vue init webpack wsw
->进入项目并安装依赖
cd wsw
cnpm install
->运行
npm run dev