vue-route路由管理怎么安装与配置
这篇文章主要介绍“vue-route路由管理怎么安装与配置”,在日常操作中,相信很多人在vue-route路由管理怎么安装与配置问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”vue-route路由管理怎么安装与配置”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!
为斗门等地区用户提供了全套网页设计制作服务,及斗门网站建设行业解决方案。主营业务为网站制作、成都网站建设、斗门网站设计,以传统方式定制建设网站,并提供域名空间备案等一条龙服务,秉承以专业、用心的态度为用户提供真诚的服务。我们深信只要达到每一位用户的要求,就会得到认可,从而选择与我们长期合作。这样,我们也可以走得更远!
介绍
Vue Router
是 Vue.js
官方的路由管理器。它和 Vue.js
的核心深度集成,让构建单页面应用变得易如反掌。包含的功能有:
嵌套的路由/视图表
模块化的、基于组件的路由配置
路由参数、查询、通配符
基于 Vue.js 过渡系统的视图过渡效果
细粒度的导航控制
带有自动激活的 CSS class 的链接
HTML5 历史模式或 hash 模式,在 IE9 中自动降级
自定义的滚动条行为
安装
安装命令
npm install vue-router --save
如果在一个模块化工程中使用它,必须要通过 Vue.use()
明确地安装路由功能:
import Vue from "vue" import VueRouter from "vue-router" Vue.use(VueRouter)
模块化使用
之前我们使用脚手架vue-cli
创建项目时,实际已经配置好了router
,创建完项目后,在项目根目录下会有一个router
文件夹,router
下有一个index.js
文件,内容如下:
import Vue from "vue"; import VueRouter from "vue-router"; import Home from "../views/Home.vue"; // 1. 当我们使用其他插件的时候,就必须使用Vue.use安装插件 Vue.use(VueRouter); // 2. 定义路由,每个路由应该映射一个组件 const routes = [ { path: "/", name: "Home", component: Home, }, { path: "/about", name: "About", component: About }, ]; // 3. 创建router实例 const router = new VueRouter({ // 配置路由和组件之间的应用关系 routes, // (缩写) 相当于 routes: routes }); // 4. 导出router对象,然后在main.js中引用 export default router;
这个文件是专门配置路由的,最后将router
对象导出后,我们在项目的main.js
中引用即可
import Vue from "vue"; import App from "./App.vue"; import router from "./router"; Vue.config.productionTip = false; new Vue({ router, // 在vue实例中添加router对象,就可以使用路由了 render: (h) => h(App), }).$mount("#app");
我们的2个组件代码About
和Home
代码如下:
// About.vue// Home.vueAbout
Home
最后我们在App.vue
中,写入如下代码:
template>首页 关于
使用
来加载链接,然后使用to
表示跳转的链接。最终会把
渲染成标签。
是路由的出口,也就是相应url
下的代码会被渲染到这个地方来。
HTML5 history模式
但是当我们启动程序,访问页面的时候,url
地址上会出现#
这是因为vue-router
默认 hash
模式 ―― 使用 URL
的 hash
来模拟一个完整的 URL
,于是当 URL
改变时,页面不会重新加载。
如果不想要很丑的 hash
,我们可以用路由的 history
模式,这种模式充分利用 history.pushState API
来完成 URL
跳转而无须重新加载页面。
const router = new VueRouter({ mode: "history", routes: [...] })
我们只需在router
文件夹下的index.js
中添加mode
为history
即可,之后重新访问,http://localhost:8080/
就不会有#
号了
注意:history
模式还需要后台配置支持。因为我们的应用是个单页客户端应用,如果后台没有正确的配置,当用户在浏览器直接访问其他url
地址就会返回 404,这就不好看了。
所以呢,你要在服务端增加一个覆盖所有情况的候选资源:如果 URL
匹配不到任何静态资源,则应该返回同一个 index.html
页面,这个页面就是你 app
依赖的页面。
到此,关于“vue-route路由管理怎么安装与配置”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注创新互联网站,小编会继续努力为大家带来更多实用的文章!
网站名称:vue-route路由管理怎么安装与配置
本文网址:http://scyanting.com/article/ihocei.html