vue.js项目构建之vue-router2.0的使用

Posted 2020-08-20

vue-router2.0官方文档地址：http://router.vuejs.org/zh-cn/index.html

单页应用？

单页应用程序（SPA，single page web application）。

SPA其实就是整个网站只有一个页面，只改变页面的显示内容，不需要改变整个网页。

vue.js 的单页面应用是基于路由和组件的。路由用于设定访问路径，并将路径和组件映射起来。页面内容切换这里就是组件的切换。

vue-router是vue.js官方的路由插件，适合构建单页面应用。

vue项目构建

使用vue-cli 、 webpack 构建项目完成之后【具体见vue.js项目构建基础 】，使用包管理工具npm安装vue-router插件：

npm install vue-router

根据原型设计以及项目具体需求编写router.js.

这里对组件要进行划分，分别按照功能模块和页面区域进行划分

这里创建一个简单实例项目，包括页面区域：

1. index.vue--首页
2. detail.vue--详情页
3. cart.vue--购物车
4. order.vue--订单详情页
5. user.vue--用户中心页

功能模块：

1. header.vue--头部组件
2. footer.vue--尾部组件
3. list.vue--商品列表组件
4. search.vue--搜索框组件
5. loading.vue--加载组件

项目创建如下图：

main.js

main.js作为项目的入口文件，引入vue和router.js以及项目的主组件App.vue。

执行创建根实例，并且挂载到主组件App，初始化路由这些操作

import Vue from ‘vue‘;
import App from ‘./App‘ 
import router from ‘./router/router‘;

// 创建和挂载根实例
const app = new Vue({
	el:‘#app‘,
	router,
	render: h => h(App)
});

router.js

 

‘use strict‘;// 严格模式
import Vue from ‘vue‘;
import VueRouter from ‘vue-router‘;

import index from ‘../page/index‘ // 首页
import detail from ‘../page/detail‘ // 详情页
import cart from ‘../page/cart‘ // 购物车
import order from ‘../page/order‘ // 订单页
import user from ‘../page/user‘ // 用户中心

// 使用模块化机制编程
Vue.use(VueRouter);

const objRouter = new VueRouter({
	mode:‘history‘,
	linkActiveClass:‘active‘,
	routes:[
		{
			name:‘index‘,
			path:‘/index‘,
			component:index
		},{
			name:‘detail‘,
			path:‘/detail‘,
			component:detail
		},{
			name:‘cart‘,
			path:‘/cart‘,
			component:cart
		},{
			name:‘order‘,
			path:‘/order‘,
			component:order
		},{
			name:‘user‘,
			path:‘/user‘,
			component:user
		}
	]
})
// 为加载模块指定默认输出
export  default objRouter

App.vue

<router-view>组件中会渲染路径匹配到的视图组件

<template>
  <div>
    <Header>
      <!-- 头部组件 -->
    </Header>
    <router-view></router-view>
    <Footer>
      <!-- 尾部组件 -->
    </Footer>
  </div>
</template>

<script>
import Header from ‘./components/header‘
import Footer from ‘./components/footer‘
export default {
  components: {
    Header,
    Footer
  }
}
</script>

使用sass

项目中我使用css预编译器--sass，在vue的项目中安装sass相关插件

npm install node-sass --save-dev

npm install sass-loader --save-dev

安装完成就可以在项目中直接使用sass 了。

如果npm安装被墙掉 ，可以使用cnpm。

可以直接引入scss文件：

require(‘../css/loading.scss‘);

或者直接在组件中编写scss样式代码：

<style lang=‘scss‘ scope>
  $color:blue;
  a{
    color: $color;
  }
</style>

 

动态路由匹配

动态路由最常用于类似user组件这种，对于所有id各不相同的用户，都要使用这个组件来渲染。

这个时候设置router.js的时候如下：

name:‘user‘,
path:‘/user/:uid‘, // 动态路径 以冒号开头
component:user

匹配路径的部分

<router-link class=‘user‘ to="/user/001">个人中心</router-link>

或者用命名路由：

<router-link class=‘user‘ :to="{name:‘user‘,params:{uid:323}}">个人中心</router-link>

user组件中接受到的值：

{{ $route.params.uid }}

 

 

vuex

vuex是一个专门为vue.js应用所设计的集中式状态管理架构。

 

vue-resource

vue-resource 作为vue插件的形式存在 ，通过XMLHttpRequest或JSONP发起请求并处理响应。