vue之vue-router跳转

vue之vue-router跳转

一、配置

在初始化使用vue-cli的时候会有vue-router的安装选择，选择安装即可。

二、嵌套路由

一般情况下，登录和项目页面属于同级，所以App.vue 只是作为一个存放组件的容器。

所以一层路由完成不了我们的需求。

在vue-cli搭建完成后，我们只需要修改router/index.js中的路由配置即可。

路由配置由下面这段代码可清晰的理解：

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'login',
      component: login,
    },
    {
      path: '/login',
      name: 'login',
      component: login,
    },
    {
      path: '/homepage',
      name: 'homepage',
      component: homepage,
      children: [
        {
          path: '/',
          name: 'Jtnc',
          component: Jtnc
        },{
          path: '/Jtnc',
          name: 'Jtnc',
          component: Jtnc
        }
      ]
    }
  ]
})

当路由配置好后，在页面中加入 <router-view>，当路由切换时， <router-view>中的内容就会切换改变。

三、使用 <router-link> 映射路由

 类似于a标签的封装，在编译之后，<router-link> 会被渲染为 <a> 标签， to 会被渲染为 href

例：

<router-link to="/home">

四、编程式导航

实际情况下，有很多按钮在执行跳转之前，还会执行一系列方法，这时可以使用 this.$router.push(location) 来修改 url，完成跳转

// 字符串
this.$router.push('/home/first')

// 对象
this.$router.push({ path: '/home/first' })

// 命名的路由
this.$router.push({ name: 'home', params: { userId: wise }})

 

参考资料：https://www.cnblogs.com/wisewrong/p/6277262.html