澳门网络娱乐游戏平台-澳门电子游戏娱乐网址-官方直营

【澳门钻石唯一旗舰】vue-router

前言:编制程序式路由在我们的项目应用进度中最常用的的艺术了。GitHub:

一、vue-router使用

官网API:

vue-router的庐山真面目目是对浏览器history的包装。router改换的也等于浏览器的history。

  • history.go(0)刷新;
  • history.go(-1)倒退;
  • history.go(1)前进;
  • history.pushState('desc','test','/admin'卡塔尔(قطر‎  => 向浏览器增加三个动静,例加载localhost:8080/admin

如何是编制程序式路由呢?正是经过写js代码来贯彻页面包车型大巴跳转

1.安装

npm install vue-router

澳门钻石唯一旗舰,1.澳门钻石唯一旗舰 1router.push({path: 'name'});

首先大家来说讲轻巧的,上面多个章程记住,等效的。① 依然在test.vue组件里面写个div并给它增加三个click跳转事件:

澳门钻石唯一旗舰 2div上增加一个click点击事件

② 在view文本下新建多个goods.vue

澳门钻石唯一旗舰 3goods.vue

③ 在router中引进那么些goods组件

澳门钻石唯一旗舰 4路由

④ 展开路径为test的页面并点击

澳门钻石唯一旗舰 5localhost

⑤ ok,点一下大家就到goods页面了,达成了跟router-view标签相近的成效

澳门钻石唯一旗舰 6goods页面

Ok,到这里大家已经完结了编制程序式路由的跳转了,接下去大家来试试看路由指导参数跳转并选拔参数。

2.使用

1 import VueRouter from 'vue-router'
2 Vue.use(VueRouter);

2.澳门钻石唯一旗舰 7%百分之四十E6%88%96%E8%五分之四85卡塔尔(قطر‎router.push({path: 'name',query:{a:123}}卡塔尔国那二种方法都足以

话非常的少说,看图你应当能看懂:

澳门钻石唯一旗舰 8路由跳转并带走参数

② 在goods.vue中输入

提醒一句,这里的收获上顶尖页面传过来的参数是$route.query.goodsId,是$route不是$router

澳门钻石唯一旗舰 9goods.vue

③ ok,大家就足以看看页面中体现下面页面传过来的参数了:

澳门钻石唯一旗舰 10localhost澳门钻石唯一旗舰 11goods.vue

3.布局(html)

<!-- 使用 router-link 组件来导航;通过传入 `to` 属性指定链接. -->
<router-link to="/home">主页</router-link>
<!-- 路由出口;路由匹配到的组件将渲染在这里 -->
<router-view></router-view>

结构扩充表达:

 1 <router-link to="/home" tag="li" active-class="active">
 2       <a href="javascript:;">首页</a>
 3 </router-link>
 4 <!-- router-link编译成a标签,加上tag='li',编译成li标签 -->
 5 <!-- 改变选中的class类名:默认是 router-link-active
 6                        1、active-class
 7                      2、const router=new VueRouter({
 8                              linkActiveClass: 'active'
 9                        }); -->
10  
11 <keep-alive> 
12      <router-view  class="router-view"></router-view>
13 </keep-alive>
14 <!-- keep-alive标签保留路由状态避免重新渲染,即内容有了就不需要重新加载了 -->        

3.$router.go();

其生龙活虎就专擅提一下,便是相像于history.go(State of Qatar的措施,括号里面填个1就是演化一级页面,-1就后退一级页面。差不离正是那样。

参照学习

4.路由现实写法(javascript)

// 定义路由组件
const Home={template:'<h3>我是主页</h3>'};
const News={template:'<h3>我是新闻</h3>'};

// 定义路由,每个路由应该映射一个组件
const routes=[
     {path:'/home', component:Home},
     {path:'/news', component:News}
];

// 生成路由实例
const router=new VueRouter({
      routes    // (缩写)相当于 routes: routes
});

// 最后挂载到vue上
new Vue({
      router
});

// 重定向 -即设置默认显示的组件
{path:'*', redirect:'/home'}

 

二、vue-router配置

1、日常的vue项目链接localhost:8080/#/goods/sdf89/user/admin链接中会有一个#号,那是router布局配置。

const router = new VueRouter({ 
      mode: 'hash', (默认值)
      routes: [...] 
})
要去掉#,使用浏览器正常的链接访问需要设置
const router = new VueRouter({ 
      mode: 'history', 
      routes: [...] 
}

2、滚动地点配置

const router = new VueRouter({
     scrollBehavior: () => ({ y: 0 })  // 滚动条滚动的行为,不加这个默认就会记忆原来滚动条的位置
});

 

本文由澳门网络娱乐游戏平台发布于编程,转载请注明出处:【澳门钻石唯一旗舰】vue-router

相关阅读