简单说说如何使用vue-router插件的方法

1 安装

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

npm install --save vue-router

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

2 用法

2.1 新建 vue 组件

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

index.vue：

<template>
<div>首页</div>
</template>

<script>
export default {
name: "index.vue"
}
</script>

<style scoped>

</style>

about.vue：

<template>
<div>关于我们</div>
</template>

<script>
export default {
name: "about"
}
</script>

<style scoped>

</style>

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 中的每一项，都有以下这些属性：

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 来动态创建 <style> 标签来写入样式。我们可以通过配置，把这些文件中的样式都统一写入 main.css，修改 webpack.config.js ：

plugins: [//插件
new ExtractTextPlugin({
filename: '[name].css',
allChunks: true
}),
...
]

2.4 配置 History 路由指令

在 package.json 中，修改 dev 指令：

"dev": "webpack-dev-server --open --history-api-fallback --config webpack.config.js",

2.5 挂载路由组件

在根实例，挂载路由组件：

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

运行时，<router-view> 会根据当前所配置的路由规则，渲染出不同的页面组件。主界面中的公共部分，比如侧边栏、导航栏以及底部版权信息栏，可以直接定义在根目录，与<router-view> 同级。这样，当切换路由时，切换的只是<router-view> 挂载的组件，其它内容不会变化。

2.6 运行

执行 npm run dev 之后，在浏览器地址栏输入不同的 URL ，就会看到挂载的不同组件信息。
http://localhost:8080/index：

http://localhost:8080/about：

2.7 重定向

我们可以在路由配置表中，配置一项功能，当访问的页面不存在时，重定向到首页：

const Routers = [
...
{//当访问的页面不存在时，重定向到首页
path: '*',
redirect: '/index'
}
]

这样，即使只访问 http://localhost:8080/，也会自动跳转到首页啦 O(∩_∩)O~

2.8 带参数的路由

路由 path 可以带参数。比如文章 URL，路由的前半部分是固定的，后半部分是动态参数，形如：/article/xxx。它们会被路由到同一个页面，在该页面可以获取 xxx 参数，然后根据这个参数来请求数据。

首先在 main.js 中配置带参数的路由规则：

const Routers = [{
...
{
path: '/article/:id',
component: (resolve) => require(['./router/views/article.vue'], resolve)
}
...
]

然后在 router/views 下新建一个 article.vue ：

<template>
<div>{{$route.params.id}}</div>
</template>

<script>
export default {
name: "article",
mounted() {
console.log(this.$route.params.id);
}
}
</script>

<style scoped>

</style>

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

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

• VueJs路由跳转――vue-router的使用详解
• vue router使用query和params传参的使用和区别
• Vue.js路由组件vue-router使用方法详解
• Vue学习笔记进阶篇之vue-router安装及使用方法
• vue中使用vue-router切换页面时滚动条自动滚动到顶部的方法
• 详解使用vue-router进行页面切换时滚动条位置与滚动监听事件
• Vue.js路由vue-router使用方法详解
• 使用vue-router beforEach实现判断用户登录跳转路由筛选功能
• 使用vue-router设置每个页面的title方法