vue进阶笔记(1-19)之2,3,4,5,6,7

原创 15038098692 随笔 随笔 299阅读 2018-04-21 21:07:43 举报

2.hash和history模式

3.router-link的各种配置项

4.重定向和别名

5.嵌套路由的使用
1.嵌套路由

app
Home Document Aboout

          study work hobby 

2.在组件里面嵌套路由:(例如about组件里面嵌套二级导航):

copmponents文件夹下的about.vue文件中的内容:

<template>
<div>
我是about页面---关于我
<hr>
<ul class="nav">
<router-link to="/about/study" tag="li">
<a>study</a> //f12查看元素 <a href="/about/study">study</a>
</router-link>
<router-link to="/about/work" tag="li">work</router-link>
<router-link to="/about/hobby" tag="li">bobby</router-link>
</ul>
</div>
</template>

<script>
export default {
}
</script>

3.子路由:

在src文件夹下创建views文件,views文件夹中放置about.vue中的二级导航组件-----study.vue和work.vue组件和hobby.vue组件,

在router文件夹下的index.js来配置路由:

先来引入新的组件,

import study from '@/views/study'
import work from '@/views/study'
import hobby from '@/views/study'

配置:

export default new Router({
mode:'history',
linkActiveClass:'is-active',
routes: [
{
path: '/', /根路径/
component:home,
},
{
path: '/home',
name: 'home',
component:home,
alias:"index"
},
{
path: '/about',
name: 'about',
component:about,
children:[ //在about组件配置里面,设置children,子路由 ,在children数组的方式中再设置对应的配置
{
path:'study',
component:study
},
{
path:'work',
component:work
},
{
path:'hobby',
component:hobby
}
]
},
{
path: '/document',
name: 'document',
component:document
},
{
path: '*',
//component:noFound
//重定向
//redirect:'/home'
//redirect:{path:'/home'}
//redirect:{name:'about'}
redirect:(to)=>{
//目标路由对象,就是访问的路径的路由信息
if(to.path === '/123'){
return '/home'
}else if(to.path === '/456'){
return {path:'/document'}
}else{
return {name:'about'}
}

     console.log(to)
  /*return '/home'*/
}
}

]
})

3.配置子路由渲染的位置-----在about.vue中,

<template>
<div>
我是about页面---关于我
<hr>
<ul class="nav">
<router-link to="/about/study" tag="li">
<a>study</a>
</router-link>
<router-link to="/about/work" tag="li">work</router-link>
<router-link to="/about/hobby" tag="li">bobby</router-link>
</ul>
<hr>
<router-view></router-view> //about.vue中的二级导航路由,还渲染在about.vue中,这这个位置渲染
</div>
</template>

<script>
export default {
}
</script>

在app.vue根组件中用过了<router-view></router-view> ,根组件中的导航,会将相应的组件内容渲染在app.vue根组件中的
<router-view></router-view> 中,对应的<router-view></router-view> 中可以嵌套二级导航,(如about.vue中)

在二级导航里面,比如about.vue中,about.vue中的导航会将组件内容渲染到about.vue中的<router-view></router-view> 里面,

4.在我们访问about.vue时,about.vue中的二级导航没有一个被渲染出来,实际上在我访问about.vue的时候,我想让study.vue被渲染出来

,这时候需要在路由里面设置默认的子路由,

在router文件夹下的index.js中,

export default new Router({
mode:'history',
linkActiveClass:'is-active',
routes: [
{
path: '/', /根路径/
component:home,
},
{
path: '/home',
name: 'home',
component:home,
alias:"index"
},
{
path: '/about',
name: 'about',
component:about,
children:[
{
path:'', //默认子路由,不在写study组件了,空着,这样当访问about组件时,about.vue中得二级导航study会被渲染出来
component:study
},
{
path:'work',
component:work
},
{
path:'hobby',
component:hobby
}
]
},
{
path: '/document',
name: 'document',
component:document
},
{
path: '*',
//component:noFound
//重定向
//redirect:'/home'
//redirect:{path:'/home'}
//redirect:{name:'about'}
redirect:(to)=>{
//目标路由对象,就是访问的路径的路由信息
if(to.path === '/123'){
return '/home'
}else if(to.path === '/456'){
return {path:'/document'}
}else{
return {name:'about'}
}

     console.log(to)
  /*return '/home'*/
}
}

]
})

当然,此时study不是激活状态,这时候,我们需要在router-link中把地址变一下,

在about.vue中,

<template>
<div>
我是about页面---关于我
<hr>
<ul class="nav">
<router-link to="/about/study" tag="li"> //改为<router-link to="/about" tag="li"><a>study</a></router-link>
<a>study</a>
</router-link>
<router-link to="/about/work" tag="li">work</router-link>
<router-link to="/about/hobby" tag="li">bobby</router-link>
</ul>
<hr>
<router-view></router-view>
</div>
</template>

<script>
export default {
}
</script>

<router-link to="/about" tag="li" exact><a>study</a></router-link>
exact精确匹配 (点击work.vue和hobby.vue组件时,study.vue导航不会是激活状态)

6.命名视图
1.一个页面有两个组件时,默认的组件会放在app.vue组件的<router-view><router-view/>中,

若一个页面有两个组件,比如增加一个侧边导航,则在app.vue中需要再重新放入一个<router-view><router-view/>,

2.给组件加一个名字:动态绑定:

在index.js中,about组件下的children组件中,给每一个组件命名:

import home from '@/components/home' /@是src目录/
import about from '@/components/about' /@是src目录/
import document from '@/components/document' /@是src目录/
import noFound from '@/components/404' /@是src目录/
import study from '@/views/study'
import work from '@/views/work'
import hobby from '@/views/hobby'
import Vue from 'vue'
import Router from 'vue-router'
/import HelloWorld from '@/components/HelloWorld'/

Vue.use(Router)
/配置路由/
/var router = new VueRouter({
routes:[
{
path:"/",
component:home
}
]
})
/
export default new Router({
mode:'history',
linkActiveClass:'is-active',
routes: [
{
path: '/', /根路径/
component:home,
},
{
path: '/home',
name: 'home',
component:home,
alias:"index"
},
{
path: '/about',
name: 'about',
component:about,
children:[
{
path:'', //默认子路由 /about
name:'about', //给about组件起了个名字:about
component:study
},
{
path:'work',
name:'work', //给work组件起了个名字:work
component:work
},
{
path:'hobby',
name:'hobby', //给hobby组件起了个名字:hobby
component:hobby
}
]
},
{
path: '/document',
name: 'document',
component:document
},
{
path: '*',
//component:noFound
//重定向
//redirect:'/home'
//redirect:{path:'/home'}
//redirect:{name:'about'}
redirect:(to)=>{
//目标路由对象,就是访问的路径的路由信息
if(to.path === '/123'){
return '/home'
}else if(to.path === '/456'){
return {path:'/document'}
}else{
return {name:'about'}
}

     console.log(to)
  /*return '/home'*/
}
}

]
})

然后在about.vue中:

<template>
<div>
我是about页面---关于我
<hr>
<ul class="nav">

  <!--<router-link to="/about" tag="li" exact>   //不再写这种嵌套关系的形式了
    <a>study</a>
  </router-link>
  <router-link to="/about/work" tag="li">work</router-link>
  <router-link to="/about/hobby" tag="li">bobby</router-link>-->

  <router-link :to="{name:about}" tag="li" exact>     //而是用路由中的name,组件的名字,动态绑定一个对象
    <a>study</a>
  </router-link>
   <router-link :to="{name:'work'}" tag="li">work</router-link>
  <router-link :to="{name:'hobby'}" tag="li">bobby</router-link>

</ul>
<hr>
<router-view></router-view>

</div>
</template>

<script>
export default {
}
</script>

此时打开页面,在about.vue下,点击study,work,hobby组件,f12查看

<ul class="nav">

<li class="router-link-exact-active is-active">
<a href="/about/">study</a> //路径还是嵌套的的
</li>
<li class="">
<a href="/about/work">work</a> //路径还是嵌套的的
</li>
<li class="">
<a href="/about/hobby">hobby</a> //路径还是嵌套的的
</li>

</ul>

再来看地址栏:切换到study和work和hobby,
地址栏地址分别为:
http://localhost:8081/about/

http://localhost:8081/about/work

http://localhost:8081/about/hobby

有时候呢我们不想要嵌套这种形式,想让地址栏显示成:(当然访问work和hobby的时候,还是在about.vue组件下的组件,只是路径里面不再嵌套了)

http://localhost:8081/work
http://localhost:8081/hobby这种形式

这时候我们怎么设置?

我们要在路由里面配置一下:在router文件夹下面的index,js文件中,

未修改之前

import home from '@/components/home' /@是src目录/
import about from '@/components/about' /@是src目录/
import document from '@/components/document' /@是src目录/
import noFound from '@/components/404' /@是src目录/
import study from '@/views/study'
import work from '@/views/work'
import hobby from '@/views/hobby'
import Vue from 'vue'
import Router from 'vue-router'
/import HelloWorld from '@/components/HelloWorld'/

Vue.use(Router)
/配置路由/
/var router = new VueRouter({
routes:[
{
path:"/",
component:home
}
]
})
/
export default new Router({
mode:'history',
linkActiveClass:'is-active',
routes: [
{
path: '/', /根路径/
component:home,
},
{
path: '/home',
name: 'home',
component:home,
alias:"index"
},
{
path: '/about',
name: 'about',
component:about,
children:[
{
path:'', //默认子路由 /about
name:'about',
component:study
},
{
path:'work', //访问字符串时,访问的是 /about/work
name:'work',
component:work
},
{
path:'hobby',
name:'hobby',
component:hobby
}
]
},
{
path: '/document',
name: 'document',
component:document
},
{
path: '*',
//component:noFound
//重定向
//redirect:'/home'
//redirect:{path:'/home'}
//redirect:{name:'about'}
redirect:(to)=>{
//目标路由对象,就是访问的路径的路由信息
if(to.path === '/123'){
return '/home'
}else if(to.path === '/456'){
return {path:'/document'}
}else{
return {name:'about'}
}

     console.log(to)
  /*return '/home'*/
}
}

]
})

修改之后:

path: '/about',
name: 'about',
component:about,
children:[
{
path:'', //默认子路由 /about
name:'about',
component:study
},
{
path:'/work', // 加上根路径/ 变为/work
name:'work',
component:work
},
{
path:'/hobby', // 变为/hobby
name:'hobby',
component:hobby
}
]
},

此时再点击work和hobby,则变为:

http://localhost:8081/work

http://localhost:8081/hobby

f12查看:

<ul class="nav">

<li class="router-link-exact-active is-active">
<a href="/about/">study</a> //相对根路径来说
</li>
<li class="">
<a href="/work">work</a> //相对根路径来说
</li>
<li class="">
<a href="/hobby">hobby</a> //相对根路径来说

</ul>

注意:此时路径不是嵌套的,路由还是嵌套的,组件study和work和hobby还是about.vue组件的子路由,

3.以上总结:

根组件里面有三个导航,每个导航对应一个组件,其中一个呢嵌套二级导航,二级导航对应自己的3个组件,

4.命名视图:

在同级同时展示多个视图,而不是嵌套展示,

例如在document.vue中还有个sider组件,

1.在views文件件中新建slider.vue组件,

2.在router文件夹下的index.js中,引入slider.vue组件,

import slider from '@/views/slider'

步骤1:在app.vue中有个<router-view><router-view/>,视图会默认渲染在这儿,但是我们需要两个视图了,

所以我们要写两个

<router-view><router-view/>,
<router-view><router-view/>,

为了区分他们,我们要给其中一个命名,

<router-view name="slider"><router-view/> //命名视图

<router-view><router-view/>, //默认视图

我们需要路由里面去配置一下,在router文件夹下的index.js中,
将原来对应的一个组件改为多个:

{
path: '/document',
name: 'document',
component:document
},

改为:

{
path: '/document',
name: 'document',
components:{
default:document, //默认渲染组件
slider:slider //命名组件
}
},

此时f12查看document.vue组件:(会有两部分内容)

<div data-v-00f84cea="" class="center">
我是文档页面
</div>

<div data-v-4276c915="" class="slider">
我是侧边栏
</div>

注意:

若路由里面只对应一个组件<router-view><router-view/>,,这个只会渲染到没有名字里面,即默认的,

如果配置了多个视图的话,会让名字对应的组件替换在<router-view name="slider"><router-view/> 名字相同的<router-view><router-view/>中,

7.滚动行为
1.来看一下滚动行为,document.vue页面为例,将滚动条向下拉一段距离,刷新本页面,滚动条位置不变,(浏览器有记忆功能),

点击浏览器后退箭头,再点击前进箭头回到本页面,则滚动距离为0,(没有记录下上一次的滚动位置)

2.我们现在的需求就是若在document.vue中滚动条已经滚动一段距离,那我们点击后退,前进按钮回到本页面,滚动距离依旧是原来的距离,

所以我们需要给他设置一个滚动行为
,怎么设置滚动行为呢?

需要在配置里面设置,打开router文件夹下面的index.js文件,在

export default new Router({

})

中给我们提供了一个key值,scrollBehavior

scrollBehavior对应的是一个函数,函数里面接收3个参数,to,from,savePosition,

在router文件夹下面的index.js文件中,

import home from '@/components/home' /@是src目录/
import about from '@/components/about' /@是src目录/
import document from '@/components/document' /@是src目录/
import noFound from '@/components/404' /@是src目录/
import study from '@/views/study'
import work from '@/views/work'
import hobby from '@/views/hobby'
import slider from '@/views/slider'
import Vue from 'vue'
import Router from 'vue-router'
/import HelloWorld from '@/components/HelloWorld'/

Vue.use(Router)
/配置路由/
/var router = new VueRouter({
routes:[
{
path:"/",
component:home
}
]
})
/
export default new Router({
mode:'history',
linkActiveClass:'is-active',
scrollBehavior(to,from,savePosition){ //打印一下试试看, 在点击浏览器的前进后退按钮,或者切换导航的时候触发
console.log(to) //要进入的目标路由对象
console.log(from) //离开时的路由对象
console.log(savePosition)//记录滚动条的坐标,(只有在点击前进后退的时候记录值)
},

比如当前在doucument.vue上,导航切换到home.vue,会打印出来三行,

第一行:Object {name: undefined, meta: Object, path: "/", hash: "", query: Object…} //到home.vue上

第二行: Object {name: "document", meta: Object, path: "/document", hash: "", query: Object…} //从document.vue来

第三行: null

当我们来回切换导航时,发现 console.log(savePosition)打印出来的都是null,

在我们使用前进后退按钮时,发现console.log(savePosition)打印出来的是Object {x: 0, y: 0},(记录了滚动条的坐标)

来我们看一下console.log(savePosition)打印出来的值有什么作用,
在document.vue页面上将滚动天往下拉,拉完之后我后退一下到home.vue中,查看console.log(savePosition),

我再前进一下到document.vue中,查看console.log(savePosition), Object {x: 0, y: 360} 记录了document.vue中滚动的位置,

现在我们只需要做一件事情,我们想给他设置滚动的行为,

linkActiveClass:'is-active',
scrollBehavior(to,from,savePosition){
console.log(to)
console.log(from)
console.log(savePosition)

if(savePosition){   //如果说你记录了这个值,我们就把这个值return一下
    return savePosition
}else{
  return {x:0,y:0}   //如果你没有记录,我们就返回一个对象,
}

},

来测试一下,在documen.vue页面拉下一段距离滚动条,前进按钮进到home.vue组件,后退按钮再次进入到documentt.vue组件中,可以看到页面还保持着刚刚下来滚动条的距离的样子,

<script>
export default {

}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>

routes: [
{
path: '/', /根路径/
component:home,
},
{
path: '/home',
name: 'home',
component:home,
alias:"index"
},
{
path: '/about',
name: 'about',
component:about,
children:[
{
path:'', //默认子路由 /about
name:'about',
component:study
},
{
path:'/work',
name:'work',
component:work
},
{
path:'/hobby',
name:'hobby',
component:hobby
}
]
},
{
path: '/document',
name: 'document',
components:{
default:document,
slider:slider
}
},
{
path: '*',
//component:noFound
//重定向
//redirect:'/home'
//redirect:{path:'/home'}
//redirect:{name:'about'}
redirect:(to)=>{
//目标路由对象,就是访问的路径的路由信息
if(to.path === '/123'){
return '/home'
}else if(to.path === '/456'){
return {path:'/document'}
}else{
return {name:'about'}
}

     console.log(to)
  /*return '/home'*/
}
}

]
})

3.利用hash值来设置位置,

在app.vue中给document路径加上hash值,

<template>
<div id="app">
<!-- <img src="./assets/logo.png">-->
<div class="nav-box">
<ul class="nav">
<router-link to="/" exact tag="li" event="mouseover">
<i class="fa fa-home"></i>
<span>home</span>
</router-link>

      <router-link :to="{path:'/document#abc'}" tag="li" active-class="activePink" event="mouseover">   //加上hash值#123
        <i></i>
        <span>document</span>
      </router-link>

      <router-link to="/about" tag="li">
        <i></i>
        <span>about</span>
      </router-link>
  </ul>
</div>
<router-view class="center"></router-view>
<router-view name="slider"></router-view>

</div>

</template>

<script>
export default {
name: 'app',
data(){
return {
index:'/home'
}
}
}
</script>

<style>

</style>

回到页面中,来到document.vue组件中,地址栏上http://localhost:8080/document#123 也有了hash值,

在document.vue中我们也来写上一个元素,让它定位到这个元素上去,在document.vue中

<template>
<div>
我是文档页面
<p id="abc">定位到这个元素</p> //添加要定位到的元素
</div>
</template>

<script>
export default {

}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>

在路由中设置:在router文件夹下的index.js中,

export default new Router({
mode:'history',
linkActiveClass:'is-active',
scrollBehavior(to,from,savePosition){
console.log(to)
console.log(from)
console.log(savePosition)

/*if(savePosition){
    return savePosition
}else{
  return {x:0,y:0}
}

},*/

if( to.hash ){   //用hash值来定位元素     先判断一下,如果目标.hash是存在的,hash存在
return {            //return一个对象
  selector:to.hash  
}
}

},

routes: [
{
path: '/', /根路径/
component:home,
},
{
path: '/home',
name: 'home',
component:home,
alias:"index"
},
{
path: '/about',
name: 'about',
component:about,
children:[
{
path:'', //默认子路由 /about
name:'about',
component:study
},
{
path:'/work',
name:'work',
component:work
},
{
path:'/hobby',
name:'hobby',
component:hobby
}
]
},
{
path: '/document',
name: 'document',
components:{
default:document,
slider:slider
}
},
{
path: '*',
//component:noFound
//重定向
//redirect:'/home'
//redirect:{path:'/home'}
//redirect:{name:'about'}
redirect:(to)=>{
//目标路由对象,就是访问的路径的路由信息
if(to.path === '/123'){
return '/home'
}else if(to.path === '/456'){
return {path:'/document'}
}else{
return {name:'about'}
}

     console.log(to)
  /*return '/home'*/
}
}

]
})

4.总结以上:

1.可以配置它的坐标,

linkActiveClass:'is-active',
scrollBehavior(to,from,savePosition){
console.log(to)
console.log(from)
console.log(savePosition)

if(savePosition){
    return savePosition
}else{
  return {x:0,y:0}
}

},

/*if( to.hash ){
return {
  selector:to.hash
}
}*/

},

2.可以配置它的hash,(导航router-link中的hash值与组件中定位元素的id想匹配)

linkActiveClass:'is-active',
scrollBehavior(to,from,savePosition){
console.log(to)
console.log(from)
console.log(savePosition)

/*if(savePosition){
    return savePosition
}else{
  return {x:0,y:0}
}

},*/

if( to.hash ){
return {
  selector:to.hash
}
}

},

评论 ( 1 )
最新评论