[深圳|结业弟子]JS-黄俊杰|2019年12月16日的日报-技能树.IT修真院

发表于： 2019-12-16 22:12:31

1 1160

今天完成的事

学习了路由跳转的几种方式，解决同级路由之间互相跳转的问题

遇到的困难

无

今天的收获

路由的跳转方式，包括传参

一：router-link跳转

默认重定向跳转：

  {
    path:'',        //空值里加不加斜杠/都行
    redirect:'/land'      //重新定义方向，就是首页默认跳转显示的路由
  }

用name或者path跳转（不带参数）

            <!-- 用name -->
            <router-link to="{name:'home'}"> 
            <!-- 用path -->
            <router-link to="{path:'/home'}">

带参数则添加params，query属性，类似于post,get

            <router-link to="{name:'home' params:{这里写参数}}"> 

在html取参为 $route.params(这里对应上面).参数

在JS中取参为 this.$route.params.参数

二，在函数里调用

                        //这里面可带name或者path
                this.$router.push('/home')

                        //除了push还有另一种replace   传参，上面那两种方式
            this.$router.push({name:'home',query: {id:'1'}})

三，this$router.go(n)

可用于向前或者向后跳转多少个页面，n为正整数或者负整数，如果N为0，则刷新当前页面

this.$router.go(n)

继续补充一些属性

            <!-- tag属性会把路由A标签属性渲染成其他属性，这里选择成按钮 -->
            <router-link to="/details" tag="button">+新增</router-link>

在两个子路由之间连续跳转，有个能点击后退的情况，添加，replace属性可解决。

            <!-- replace属性，会取消连续后退功能，直接返回上一级，如果没有上一级，则没有返回键 -->
            <router-link to="/backstage/list" replace style="text-decoration:none">

hash与history，hash（读哈希值）如下图中间会有个#号，

history可以设置同源下url的，而hash只能修改后面的，下图就是hash，需要改成histroy,也就是去除#号，histroy有一个不好的地方就是，刷新页面时如果服务器没响应，就会出现404.

const router = new VueRouter({
  mode: "history",//HTML模式，去除#号
  base: process.env.BASE_URL,

  // routes 是配置路由与组件之间的映射应用关系
  routes
});

fullPath,完整路径

            $route.fullPath(这里面要输入完整的路径)

明天的计划。

完成详情页上传图片功能

返回列表