Vue中的路由

Posted 壹笑倾人城

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vue中的路由相关的知识,希望对你有一定的参考价值。

 

 

访问不同的路径,就可以返回不同的结果(不同的组件) 
前端自己处理页面跳转都是两种方式:

  • hash模式:开发时使用hash,不会导致404错误,但是不支持SEO
  • h5中的history.pushState:上线采用h5的跳转

VUE中的路由: 
[安装]

  • 1、在要使用路由的项目中打开CMD命令 输入npm install vue-router,安装vue的路由模块
  • 2、在页面中先引入vue.js,再引入vue-router.js,因为vue-router是基于vue的

[使用]

  • 1、声明创建路由表,在路由表中将路径和对应的组件关联起来
  • 2、初始化路由并传入路由表
  • 3、在vue的实例中注册路由

router-view(全局组件:用来将路由渲染到页面上)

    • 4、在页面中使用router-view这个全局组件来将路由渲染到页面上
 let home={template:‘<div>首页</div>‘};
 let list={template:‘<div>列表页</div>‘};
//1、创建路由表:routes为路由的映射表 配置路径和组件的关系(名字最好用routes)
 let routes=[
        //路径前必须加 ‘/’
        {path:‘‘,component:home},//默认展示的路由(默认展示的不需要加/)
        {path:‘/home‘,component:home},//一个路径对应一个组件
        {path:‘/list‘,component:list},
        {path:‘*‘,redirect:‘/home‘}//用户随便输入路径时,重定向到home组件,防止出现404
 ];
//2、初始化路由(名字最好用router)
 let router=new VueRouter({//初始化路由:传入路由表
        routes:routes//路由中提供的路由表属性名就是routes所以可以简写如下
        routes
 });
//3、在vue实例中注册路由,之后就可以在页面中使用了
 let vm=new Vue({
        el:‘#app‘,
        router//注册路由(此处为简写方式,理由同上边路由表的简写方式)
 })
 //4、页面中使用router-view这个全局组件来将路由渲染到页面上
 <div id="app">
    <router-view></router-view>
 </div>

router-link(全局组件,用来实现点击跳转,相当于按钮)

    • 5、使用router-link全局组件,来实现点击跳转 
      router-link存在两个属性:
    • to:跳转到哪个(必须加,值为要跳转的路径)
    • tag:要把router-link变为哪个标签(不改默认是a标签)

 

//修改上面的html如下
  <div id="app">
      <router-link to="/home" tag="button">首页</router-link>
      <router-link to="/list" tag="button">列表页</router-link>
      <router-view></router-view>
  </div>

页面返回与跳转的方法

当在vue的实例中注册过路由之后,每个组件上都会有一个名叫$router的对象,还有一个叫做$route的对象;

$router:存储了跳转的方法

  • 组件.$router.push():强制跳转到某个路径,参数为路径
  • 组件.$router.replace():路由替换,将当前路径替换为新的路径(很少用到)
  • 组件.$router.go():返回某一级,参数为返回多少级(-1为上一级,1为下一级)

$route:存储了很多需要的参数

只要路径改变了,$route值就会改变,可以通过watch方法监听$route属性,根据路径的不同来发送ajax请求获取到不同的数据

  • 组件.$route.params:值是一个对象,存储了路径匹配之后的值 
//由于路径有很多,而我们不能把路径写死,所以要写成类似正则的形式来匹配路径
 /article/2/d //一个路径
 /article/:c/:a //表示路径匹配,和上面的匹配后产生一个对象,存在$route.params当中:{c:2,a:d}

路由的嵌套

可在路由表中嵌套二级路由,嵌套二级路由的一级路由的template也要做对应的修改;

<div id="app">
      <router-link to="/home">首页</router-link>
      <router-link to="/detail">详情页</router-link>
      <router-view></router-view><!--一级路由显示区域-->
  </div>
  <template id="detail">
      <div>
          <router-link to="/detail/info">个人中心</router-link>
          <router-link to="/detail/about">关于我</router-link>
          <router-view></router-view><!--二级路由显示区域-->
      </div>
  </template>
 //组件
    let home={template:‘<div>home</div>‘};
    let detail={template:‘#detail‘};
    let info={template:‘<div>info</div>‘};
    let about={template:‘<div>about</div>‘};
    //创建路由表
    let routes=[
        {path:‘/home‘,component:home},
        {
            path:‘/detail‘,
            component:detail,
            //二级路由写在childern属性当中
            children:[
       //二级以及二级以上路由的路径永远不带‘/’,如果带‘/’代表是一级路由
                {path:‘info‘,component:info},
                {path:‘about‘,component:about}
            ]
        },
    ];
    //初始化路由并传入路由表
    let router=new VueRouter({routes});
    let vm=new Vue({
        el:‘#app‘,
        //注册路由
        router
    })

 

以上是关于Vue中的路由的主要内容,如果未能解决你的问题,请参考以下文章

VSCode自定义代码片段11——vue路由的配置

vue路由对象($route)参数简介

vue 路由对象(常用的)

vue知识点-$route和$router

VSCode自定义代码片段1——vue主模板

VSCode自定义代码片段——.vue文件的模板