Router界面切换（二）path切换

一、定义router路径

export default new Router({
  routes: [
    {
      path: '/',
      component: pathPush
    },
    {
      path: '/first',  // 跳转到first界面
      component: first
    },
    {
      path: '/second',  // 跳转到second页面
      component: second
    },
  ]
})

二、不带参数

• 声明式导航

<router-link to="/first">first</router-link>

• 编程是导航

  methods: {
    // 点击跳转按钮，要执行的方法
    respondsToFirst() {
      this.$router.push('/first')
    },
  }

这里的/first是将要跳转界面的path

三、带参数

• 声明式导航

<router-link :to="{ path: '/second', query: { id: 1111}}">second</router-link><

• 编程是导航

  methods: {
  // 点击跳转按钮，要执行的方法
    respondsToSecond() {
      this.$router.push({ path: '/second', query: { id: 1111 }})
    }
  }

这里的/second是将要跳转界面的path, 而这里的{ id: 1111 }是传递的参数

ps:在second页面获取参数

 this.$route.query.id

demo