路由编程式导航

最新推荐文章于 2024-05-31 08:29:18 发布

冰雪奇缘lb

最新推荐文章于 2024-05-31 08:29:18 发布

阅读量68

点赞数

分类专栏： Vue

本文链接：https://blog.csdn.net/weixin_44682587/article/details/114281410

版权

Vue 专栏收录该内容

26 篇文章 0 订阅

订阅专栏

用法举例：

main.js文件

import Vue from 'vue'// ES6模块导入方式commoniS var Vue = require("vue"）
import App from './App.vue'
import router from './router'

Vue.config.productionTip = false

new Vue(
  router,
  render: h =>h(App)
}).$mount('#box')

Vue组件使用

<template>
  <div>
    <ul>
      <li v-for="data in datalist" :key="data" click="handleChangePage(data)">
        {data}}
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  data(){
    return {
      datalist:["11111","22222","3333"]
    }
  },
  methods:{
    handleChangePage(id){
      console.log(id)
      //编程式导航
      this.$router.push(`/film`)
    }
  }



router.js文件
const router = new Router({
  routes: [
    {
      path: '/film',
      component:Film,
      children:[
        {
          path:"/film/nowplaying",/l/film/nowplaying
          component:Nowplaying
        }，
        {
          path: "comingsoon",
          component:Comingsoon
        }
     ]
 })