Vue.js进阶系列(30)--路由跳转

长话短说，今天小编就为大家分享如何实现路由跳转O(∩_∩)O

image.png

一、路由的默认路径

1.产生原因

  当我们进入一个网页的时候，首先引入眼帘的肯定是首页对不对。所以我们要将首页作为我们的默认路径

2.用法

其实很简单，在routes的映射关系里使用redirect。
  redirect又叫重定向，意思是当path为空的时候，就跳转到redirect指定的路径。
比如：

const router = new VueRouter({
    // 负责URL和页面的映射关系
    routes:[
    //路由的默认路径
        {
            path:"",
            redirect:'/home'
        },
        {
            path:'/home',
            component:Home
        },
        {
            path:'/about',
            component:About
        }
        
    ]
})

image.png

  当路径为空的时候，我们就跳转到‘/home’路径下，然后根据映射关系，跳转到/home路径下就显示首页的内容。

3.改进

  但是大家有没有发现，我们的URL地址多了个 “#”【因为是通过hash值修改的URL】，然而我们并不希望有这个多余的“#”，怎么办呢？
很简单，在创建router对象的时候添加多一个属性： mode：history

const router = new VueRouter({
    // 负责URL和页面的映射关系
    routes:[
        {
            path:"",
            redirect:'/home'
        },
        {
            path:'/home',
            component:Home
        },
        {
            path:'/about',
            component:About
        }
        
    ],
    mode:'history'
})

来对比两者之前的区别：

有“#”.png

没有“#”.png

好啦，今天的小编也偷偷懒，记得原谅我o(╥﹏╥)o