时间:2021-05-18
1 安装
首先,通过 npm 安装 vue-router 插件:
安装的插件版本是:vue-router@3.0.2
2 用法
2.1 新建 vue 组件
在 router 目录中,新建 views 目录,然后新建两个 vue 组件(一个页面就对应一个组件)。
index.vue:
about.vue:
2.2 修改 main.js
步骤如下:
Routers 中的每一项,都有以下这些属性:
属性 说明 path 匹配路径 component 需要映射的组件
webpack 把每一个路由都打包成一个 js 文件。只有在请求该页面时,才会加载这个 js 文件,即按需加载。
如果需要一次性加载,那么可以这样配置:
配置了异步路由之后,编译出的页面 js 被称为 chunk,它们默认的命名格式为 0.main.js、1.main.js 等等。
可以在 webpack.config.js 中配置这个 chunk 的命名格式:
刷新页面之后,就会在调试模式看到 chunk 名称已经被改变咯:
在 RouterConfig 中,我们使用了 HTML5 的 History 路由模式,即通过 "/" 来设置路径。如果不配置 mode,RouterConfig 默认是使用 “#” (锚点)来匹配路径。
注意: 生产环境中,服务端必须将所有路由都指向同一个 HTML,或设置 404 页面为这个 HTML 页面,否则刷新页面就会出现 404 错误。
2.3 配置 chunk 样式
使用了 chunk 之后,每个 *.vue 文件中所定义的样式,默认通过 Javascript 来动态创建 <style> 标签来写入样式。我们可以通过配置,把这些文件中的样式都统一写入 main.css,修改 webpack.config.js :
2.4 配置 History 路由指令
在 package.json 中,修改 dev 指令:
2.5 挂载路由组件
在根实例,挂载路由组件:
运行时,<router-view> 会根据当前所配置的路由规则,渲染出不同的页面组件。主界面中的公共部分,比如侧边栏、导航栏以及底部版权信息栏,可以直接定义在根目录,与<router-view> 同级。这样,当切换路由时,切换的只是<router-view> 挂载的组件,其它内容不会变化。
2.6 运行
执行 npm run dev 之后,在浏览器地址栏输入不同的 URL ,就会看到挂载的不同组件信息。
http://localhost:8080/index:
http://localhost:8080/about:
2.7 重定向
我们可以在路由配置表中,配置一项功能,当访问的页面不存在时,重定向到首页:
这样,即使只访问 http://localhost:8080/,也会自动跳转到首页啦 O(∩_∩)O~
2.8 带参数的路由
路由 path 可以带参数。比如文章 URL,路由的前半部分是固定的,后半部分是动态参数,形如:/article/xxx。它们会被路由到同一个页面,在该页面可以获取 xxx 参数,然后根据这个参数来请求数据。
首先在 main.js 中配置带参数的路由规则:
然后在 router/views 下新建一个 article.vue :
运行 npm run dev 后,在浏览器地址栏中输入 http://localhost:8080/article/123,就能访问到 article.vue 组件咯:
注意: 因为配置的参数路由规则是 /article/:id,即必须带 id 参数,否则是会重定向会 /index 的哦O(∩_∩)O~
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
vue-router是一个插件包,要先用npm进行安装1、安装vue-routernpminstallvue-routeryarnaddvue-router2、
vue-router该如何使用忽然碰到一个常见的问题,明明可以使用v-if/v-show可以的解决的问题,有没有必要是使用vue-router来解决。比如常见的
1.在main.js中导入vue-router和组件importVueRouterfrom'vue-router';//导入vue-router并将它命名为Vu
在vue中,实现Tab切换主要有三种方式:使用动态组件,使用vue-router路由,使用第三方插件。因为这次完成的功能只是简单切换组件,再则觉得使用路由切换需
vue-router是Vue.js官方提供的一套专用的路由工具库安装命令如下npmivue-router-Dvue-router实例是一个Vue插件,我们需要在