2021/1/26 vue路由概念总结

路由详解（一）

（1）router-link

<router-link> 封装了一个<a>标签，内有一个属性是to属性，可以链接不同页面

<router-link to ="/">home</router-link>
    <router-link to ='/about'>about</router-link>
    <br>
    <router-view/>

{ path: '/',
    name: 'home',
    component: Home,
  },
  {
    path: '/about',
    name: 'about',
    component: About,

  }

（2）动态路由匹配

第一种

①router path配置

 {
    path: '/about/:name',
    name: 'about',
    component: About,

  }

②view配置路由链接

<router-link to ='/about/132131'>about</router-link>

③about页面接收name参数

{{$route.params.name}}

④动态链接参数

<router-link :to ="'/about/'+msg">about</router-link>

注意：双引号内为单引号

⑤动态链接函数返回值

<router-link :to ="'/about/'+getdata()">about</router-link>


getdata(){
      var a = 1;
      return a
    }

第二种

①router path配置

 {
    path: '/about',
    name: 'about',
    component: About,

  }

②view 链接参数

<router-link to ='/about?name=112313'>about</router-link>

③about页面接收参数

{{$route.query.name}}

④动态链接参数

<router-link :to ="'/about?name='+msg">about</router-link>

⑤动态链接函数返回值

<router-link :to ="'/about?name='+getdata()">about</router-link>

（3）嵌套路由

①嵌套路由配置

{
    path: '/about',
    name: 'about',
    component: About,
    children:[
      {
        path: 'child',
        name: 'aboutchild',
        component: Aboutchild,
      }
    ],

  }

注意：嵌套的路由path不需要添加“/”,因为默认添加，

②view配置

About页面
<div>
    {{msg}}
    <router-view/>

  </div>

Aboutchild
<div>
    {{msg}}


  </div>

③跳转

跳转解释，

类似默认App.vue页面跳转到 Home页面一样。App中的<router-link>显示HOME页面跳转，显示结果是在App页面中的<router-view/>

嵌套路由，从父页面跳转到子页面，也是在类似父页面中<router-link>显示chlid页面的跳转，显示结果在父页面的<router-view/>，

 

 只有将子页面显示到父页面，父页面显示到跟页面才能顺利显示，当父页面没有调用子页面时，根页面不会显示视图。

（4）命名路由

①在router里面 有一个name 属性，在<router-link :to="{name:'home'}">Home<.router-link>

（5）命名视图

①router配置

{
    path: '/view',
    components:{
      default:Aboutchild,
      'home':Home,
      'about':About,


    }



  }

②view配置

<router-view name="view"/>
<router-view name="home"/>
<router-view name="about"/>

@跳转

<router-link to='/view'>跳转到命名视图</router-link>

当点击后会跳到view视图，同时显示Aboutchild,About,Home视图。

（6）重定向

path:'/xxx'

redirect：‘/home’页面

当访问/xxx页面时，重定向到home页面， redirect 可以是路径，对象 to函数（含有return）返回值可以是路径也可以是对象

（7）别名

在router配置中有一个属性，有一个alias属性：就是别名。当URL调用别名时，等同于path和name

（8）通过JS控制页面

this.$route.go(-1) //返回

this.$route.back() //返回

this.$route.go(1) //前进

this.$route.push({path:'/xxx'}) //跳转到指定路径 在路由栈里面加入一个路由信息 简写puth('/xxx')

this.$route.push({name:'xxx'}) //跳转到指定命名路由

this.$route.replace({path:'/xxx'}) //将路由栈的信息替换成/xxx，页面将无法回退

this.$route.push({

path: '/xxx',

query:{ // name:'xxx'} //跳转的时候携带参数

　})

this.$route.push({

path: '/xxx',

params:{ // name:'xxx'} //跳转的时候携带参数

　})

this.$route.push({

path: `/xxx/${name}`  //跳转的时候携带参数

　})