vue-router配置介绍和使用方法（一）

1. vue-router配置流程概述：

1) 准备工作：建立vue.js项目文件夹，通过cmd命令，完成新建文件夹的相关项目配置（具体操作，请参考“如何进行 node.js的 安装与卸载 ”）；

• vue init webpack 项目文件名
• 接着按要求配置Project name、author、vue-router（选择Yes）等等相关参数
• cd 项目文件名
• npm install
• npm run dev

2) 在main.js文件中，进行关于（首页）主体文件（App.vue）的基础配置：

• 引入Vue主体
• 引入vue-router主体

• 引入一个个link路由对象：

  • 在main.js文件中，创建路由对象并配置路由规则（如下绿色加粗代码）：
    
let router = new VueRouter({
//routes
routes: [
//component后面是一个个link对象
{path: '/home',name: 'app',component: Home},
{path: '/hello',name: 'app',component: HelloWorld}
]
});
// 注意：单词拼写是：component, 不加s！


• 安装插件vue-router（挂载属性） ，如右侧代码：Vue.use(VueRouter);

3) 建立相关路由文件夹，及相关路由文件（类如home.vue/about.vue文件）

4) 留坑，在app.vue文件中留坑，如右侧代码：

5) new Vue 启动 ，如右侧代码：new Vue({ •••省略••• });

6) 最后浏览器查看下实时效果。

---

效果图预览：

---

2. 文件目录结构预览：

---

3. 相关代码，参看如下：

main.js文件

import Vue from 'vue';
import VueRouter from 'vue-router';
//引入主体（页面初始化显示）
import App from './components/app.vue';
//一个个link对象 - 分类
import Home from './components/home.vue';
import HelloWorld from '@/components/HelloWorld';

//安装插件
Vue.use(VueRouter);//挂载属性

//创建路由对象并配置路由规则
let router = new VueRouter({
    //routes
    routes: [
    //一个个link对象
    {path: '/home',name: 'app',component: Home},
    {path: '/hello',name: 'app',component: HelloWorld}
  ]
});

/* new Vue 启动 */
new Vue({
  el: '#app',
  render: c => c(App),
  //让vue知道我们的路由规则
  router:router,//可以简写为router
})

app.vue文件

<template>
  <div>
    
        <router-view>router-view>     
  div>
template>

<script>
    export default {
      data(){
        return{

        }
      },
      methods:{

      }
    }
script>

<style scoped>  
style>

home.vue文件

<template>
    <div>
        我是主页
    div>
template>

<script>    
script>

<style scoped>  
style>