1安装

首先，通过npm安装vue路由器插件：

NPM install-savevue-router安装的插件版本为：[emailprotected]

2用法

2.1新的vue组件

在路由器目录中，创建一个新的视图目录，然后创建两个vue组件(一个页面对应一个组件)。

index.vue:

模板div主页/div/模板脚本导出默认值{ name : ' index . vue ' }/脚本stylescoped/styleabout.vue:

template div about us/div/template script export default { name : ' about ' }/script style scoped/style 2.2 modify main . js

//从“vue”导入vue从“vue-router”导入Vue路由器；//引入hello.vue组件导入Hello from’。/hello . vue '/load vue-路由器插件vue . use(VueRouter)；/*定义路由匹配表*/const Routers=[{ path : '/index '，component 3360(resolve)=require([)。/路由器/视图/索引。vue']，resolve)}，{path3360'/about '，component :(resolve)=require([)。/路由器/视图/关于。vue']，resolve)}]//路由配置const RouterConfig={//使用HTML5 History路由模式mode3360' history '，routes 3360 routes }；//路由实例constrouter=newvue路由器(router config)；newvue ({el:' # app '，router : router，render :h=h (hello)})的步骤如下：

加载vue路由器插件。定义一个路由匹配表，其中每条路由都映射到一个组件。配置路由。创建新的路由实例。Vue实例中引用了路由实例。路由器中的每个项目都有以下属性：

属性描述路径与需要映射的路径组件匹配。webpack将每条路由打包到一个js文件中。只有当请求页面时，才会加载js文件，即按需加载。

如果需要一次性加载，可以按如下方式进行配置：

{path:'/index '，component: require('。/router/view/index . vue’)}配置异步路由后，编译后的页面js称为chunk，默认命名格式为0.main.js、1.main.js等。

您可以在webpack.config.js中配置此区块的命名格式：

输出： {.//区块文件名区块文件名： '[名称]。chunk.js'}刷新页面后，您会看到在调试模式下块名已经更改：

在RouterConfig中，我们使用HTML5的历史路由模式，即通过“/”设置路径。如果未配置模式，默认情况下，RouterConfig使用“#”(锚点)来匹配路径。

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

2.3配置块样式

使用chunk后，在每个*中定义的样式。vue文件由Javascript动态创建，用于编写样式。我们可以将这些文件中的所有样式写入main.css，并通过配置修改webpack.config.js:

Plugins: [//插件新extractextplugin({ filename : '[name])。CSS '，allchunks : true})，] 2.4配置历史路由指令

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

dev ' : ' Webpack-dev-server-open-history-API-fallback-config Webpack . config . js '，2.5挂载路由组件

在根实例上，安装路由组件：

模板div当路由器-视图/路由器-视图/div/模板运行时，路由器-视图将根据当前配置的路由规则呈现不同的页面组件。主界面中的常用部分，如侧边栏、导航栏、底部版权信息栏，可以直接在根目录中定义，与路由器-视图是同一级别。这样，在切换路由时，只会切换路由器视图挂载的组件，其他内容不会改变。

2.6操作

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

http://localhost :8080/关于：

2.7重定向

当被访问页面不存在时，我们可以在路由配置表中配置一个函数来重定向到主页：

常量路由器=[.{//当访问的页面不存在时，重定向到主页路径：' *，redirect:'/index'}]。这样，即使只访问http://localhost33608080/，也会自动跳转到首页O(_)O~

2.8带参数的布线

路由路径可以采用参数。比如文章URL，路由前半部分是固定的，后半部分是动态参数，比如：/article/xxx。它们将被路由到同一个页面，在那里您可以获取xxx参数，然后根据该参数请求数据。

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

constructures=[{ 0.{path:'/article/: id '，component 3360(resolve)=require([)。/router/view/article . vue ']，resolve)}.]然后在路由器/视图下创建一篇新文章

template div { { $ route . params . id } }/div/template script导出默认{ name: 'article '，已装载(){ console.log(this。$ route . params . id)；} }/scriptstyle scoped/style运行npm run dev后，在浏览器地址栏中输入http://localhost :8080/article/123即可访问article.vue组件：

注意：因为配置的参数路由规则是/article/:id，也就是必须取id参数，否则会重定向/index ( _ ) o ~

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。