怎么使用vue-router插件

小编给大家分享一下怎么使用vue-router插件，希望大家阅读完这篇文章之后都有所收获，下面让我们一起去探讨吧！

成都创新互联是一家专业提供防城港企业网站建设,专注与成都网站设计、成都做网站、H5技术、小程序制作等业务。10年已为防城港众多企业、政府机构等服务。创新互联专业网站建设公司优惠进行中。

1 安装

首先，通过 npm 安装 vue-router 插件：

npm install --save vue-router

安装的插件版本是：vue-router@3.0.2

2 用法

2.1 新建 vue 组件

在 router 目录中，新建  views 目录，然后新建两个 vue 组件（一个页面就对应一个组件）。

index.vue：

about.vue：

2.2 修改 main.js

// 引入 Vue 框架
import Vue from 'vue'
import VueRouter from 'vue-router';
//引入 hello.vue 组件
import Hello from './hello.vue'

//加载 vue-router 插件
Vue.use(VueRouter);

/*定义路由匹配表*/
const Routers = [{
  path: '/index',
  component: (resolve) => require(['./router/views/index.vue'], resolve)
},
  {
    path: '/about',
    component: (resolve) => require(['./router/views/about.vue'], resolve)
  }]

//路由配置
const RouterConfig = {
  //使用 HTML5 的 History 路由模式
  mode: 'history',
  routes: Routers
};
//路由实例
const router = new VueRouter(RouterConfig);

 

new Vue({
  el: '#app',
  router: router,
  render: h => h(Hello)
})

步骤如下：

1. 加载 vue-router 插件。

2. 定义路由匹配表，每个路由映射到一个组件。

3. 配置路由。

4. 新建路由实例。

5. 在 Vue 实例中引用路由实例。

Routers 中的每一项，都有以下这些属性：

属性	说明
path	匹配路径
component	需要映射的组件

webpack 把每一个路由都打包成一个 js 文件。只有在请求该页面时，才会加载这个 js 文件，即按需加载。

如果需要一次性加载，那么可以这样配置：

{
    path: '/index',
    component: require('./router/views/index.vue')
}

配置了异步路由之后，编译出的页面 js 被称为 chunk，它们默认的命名格式为 0.main.js、1.main.js 等等。

可以在 webpack.config.js 中配置这个 chunk 的命名格式：

 output: {
    ...
    //chunk 文件名
    chunkFilename:'[name].chunk.js'
  }

刷新页面之后，就会在调试模式看到 chunk 名称已经被改变咯：

 

在 RouterConfig 中，我们使用了  HTML5 的 History 路由模式，即通过 "/" 来设置路径。如果不配置 mode，RouterConfig 默认是使用 “#” （锚点）来匹配路径。

注意： 生产环境中，服务端必须将所有路由都指向同一个 HTML，或设置 404 页面为这个 HTML 页面，否则刷新页面就会出现 404 错误。

2.3 配置 chunk 样式

使用了 chunk 之后，每个 *.vue 文件中所定义的样式，默认通过 Javascript 来动态创建

运行 npm run dev 后，在浏览器地址栏中输入 http://localhost:8080/article/123，就能访问到 article.vue 组件咯：

 

注意： 因为配置的参数路由规则是 /article/:id，即必须带 id 参数，否则是会重定向 /index 的

看完了这篇文章，相信你对“怎么使用vue-router插件”有了一定的了解，如果想了解更多相关知识，欢迎关注创新互联行业资讯频道，感谢各位的阅读！

文章题目：怎么使用vue-router插件
本文URL：http://6mz.cn/article/pcdisd.html