Vue.js实战之利用vue-router实现跳转页面 - 行业资讯 - 肥雀云

使用Vue。js做项目的时候,一个页面是由多个组件构成的,所以在跳转页面的时候,并不适合用传统的href,于是vue-router应运而生。

官方文档:https://router.vuejs.org/zh-cn/essentials/getting-started.html

<强>这次的实例主要实现下图的效果:

<强>项目结构:

用vue-cli创建的初始模板里面,并没有vue-router,需要通过npm安装

　　　　　　cnpm我vue-router - d 　　　　

安装完成后,在src文件夹下,创建一个路由器。js文件,和主要。js平级

然后在路由器。js中引入所需的组件,创建路由器对象

　　　　　　进口从“。/组件/home.vue”回家　　　　const路由器=[ 　　{ 　　路径:/home, 　　名称:“回家”, 　　组件:回家　　}, 　　{ 　　路径:“/? 　　组件:回家　　}, 　　］　　出口的默认路由器　　　　

在创建的路由器对象中,路径配置了路由的路径,组件配置了映射的组件

出口默认路由器必须写在文件底部,而且后面还需要接一空行,否则无法通过ESlint语法验证

然后主要。js也需要修改:

　　　　　　从“Vue”进口Vue 　　从“vue-router”进口VueRouter 　　从“进口路由器。/路由器的　　导入应用程序从“/App。” 　　　　Vue.use (VueRouter) 　　　　const路由器=new VueRouter ({ 　　模式:“历史”, 　　路线:路由器　　}) 　　　　新Vue ({ 　　埃尔:“#应用”, 　　路由器, 　　呈现:h=比;h(应用) 　　}) 　　　　

在创建的路由器对象中,如果不配置模式,就会使用默认的散列模式,该模式下会将路径格式化为# !开头。

添加<代码>模式:“历史”之后将使用HTML5历史模式,该模式下没有#前缀,而且可以使用pushState和replaceState来管理记录。

关于HTML5历史模式的更多内容,可以参考官方文档:https://router.vuejs.org/zh-cn/essentials/history-mode.html

在这个实例中,为了加深项目层级,应用。vue只是作为一个存放组件的容器:

Vue.js实战之利用vue-router实现跳转页面

其中<代码> & lt; router-view> & lt; router-view> 中的内容也会发生更改

上面已经配置了两个路由,当打开http://localhost: 8080或者http://localhost: 8080/回家的时候,就会在& lt; router-view>中渲染回家。vue组件

回家。vue是真正的父组件,first.vue,登录。vue等子组件都会渲染到家里。vue中的<代码> & lt; router-view>

Vue.js实战之利用vue-router实现跳转页面”>,</p>
　　<p>如此一来,就需要在一级路由中嵌套二级路由,修改routers.js </p>
　　
　　<pre类= 　　进口从“。/组件/home.vue”回家　　从’。/组件/导入第一个孩子/first.vue ' 　　从“进口登录。/组件/孩子/login.vue” 　　　　const路由器=[ 　　{ 　　路径:“/? 　　组件:回家, 　　孩子:( 　　{ 　　路径:“/? 　　组件:登录　　} 　　］　　}, 　　{ 　　路径:/home, 　　名称:“回家”, 　　组件:回家, 　　孩子:( 　　{ 　　路径:“/? 　　名称:“登录”, 　　组件:登录　　}, 　　{ 　　路径:“第一次”, 　　名称:“第一次”, 　　组件:第一　　} 　　］　　} 　　］　　　　出口的默认路由器　　　　

在配置的路由后面,添加儿童,并在孩子中添加二级路由,就能实现路由嵌套

配置路径的时候,以“/笨返那短茁肪痘岜坏弊鞲肪?所以子路由的路径不需要添加"/"

回家。vue中引入了头。vue组件,其中含有导航菜单

当点击导航菜单的时候,会切换。vue中<代码> & lt; router-view> 中的内容

这种只需要跳转页面,不需要添加验证方法的情况,可以使用<代码> & lt; router-link>