Vue中的路由

Posted 2020-10-28 壹笑倾人城

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
    })