Router界面切换（三）name

一、定义router路径

export default new Router({
  routes: [
    {
      path: '/',
      name: 'namePush',
      component: namePush
    },
    {
      path: '/first',
      name: 'first',
      component: first
    },
    {
      path: '/third',
      name: 'third',
      component: third
    }
  ]
})

name属性是必须的

二、不带参数

• 声明式导航

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

• 编程式导航

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

这里的first是将要跳转界面的name

三、带参数

• 声明式导航

<router-link :to="{ name: 'third', params: { id: 1111}}">third</router-link>

• 编程是导航

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

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

ps:在third页面获取参数

 this.$route.params.id

demo