Vue-Router简单的导航使用

cmd进入系统命令行终端通过命令：vue ui  界面的方式创建vue项目后，通过WebStorm将项目打开，通过npm-->serve运行该项目，当出现下图两个链接时，说明项目已经成功运行起来，点击第一个http://localhost:8080/浏览器可以打开默认的加载HelloWorld组件的项目界面(稍等3-5s浏览器启动)。

页面导航使用的路由安装：

在上图WebStorm IDE的Terminal中运行命令：cnpm install vue-router --save ，安装vue-router路由组件，如果在一个模块化工程中使用它，必须要通过 Vue.use() 明确地安装路由功能，也就是说在项目的main.js文件中需要导入组件，官方介绍请看：https://router.vuejs.org/zh/installation.html

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

在入口文件main.js中完整使用示例如下：

import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter);
Vue.config.productionTip = false;

// 导入、定义组件
const home=()=>import("@/components/home");
const article=()=>import("@/components/article");

// 定义路由 每个路由应该映射一个组件
const routes=[{path:'/home',component:home},
  {path: '/article',component:article}];

const router=new VueRouter({
  routes
})

new Vue({
  render: h => h(App),router
}).$mount('#app')

其中App.vue文件修改后如下：

添加的两个简单的自定义vue组件如下：

home.vue组件：

article.vue组件：

完整的目录结构如下：

运行效果如下：

随着项目页面的增多，为了方便管理页面路由，简化main.js文件大小，可以将路由统一抽离到一个js文件中，这里只需要改动main.js和新增一个路由管理文件index.js：

 main.js抽离后：

import Vue from 'vue'
import App from './App.vue'
import router from './router/index' //需要导入路由管理文件

Vue.config.productionTip = false;


new Vue({
  render: h => h(App),router
}).$mount('#app')

页面统一路由管理文件index.js

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter);

// 导入、定义组件
const home=()=>import("@/components/home");
const article=()=>import("@/components/article");

// 定义路由 每个路由应该映射一个组件
const routes=[
    {path:'/home',component:home},
    {path: '/article',component:article}
    ];

const router=new VueRouter({
    routes
});

export default router

重新运行项目，依然可以完美的导航。效果图见上。