vue---router

135 阅读1分钟
  • 带参数的动态路由匹配 很多时候,我们需要将给定匹配模式的路由映射到同一个组件。例如,我们可能有一个 User 组件,它应该对所有用户进行渲染,但用户 ID 不同。在 Vue Router 中,我们可以在路径中使用一个动态字段来实现,我们称之为 路径参数 :
const User = {
  template: '<div>User</div>',
}

// 这些都会传递给 `createRouter`
const routes = [
  // 动态字段以冒号开始
  { path: '/users/:id', component: User },
]
  • 路由的跳转
<button @click="goToMenu" class="btn btn-success">let is go</button>
</div>
</template>
<script>
export default{
  methods:{
    goToMenu(){
      //跳转到上一次流浪的页面
      //this.$router.go(-1)
      //指定跳转的地址
      //this.$router.replace('/menu')
      //指定跳转的路由的名字下
      //this.$router.replace({name:'menuLink'})
      //最常用的用push来跳转
      //this.$router.push('/menu')
      this.$router.push({name:'menuLink'})
    }