Vue 路由的的基本使用

prtyaa 2023-12-26 18:20:05  66180

分类专栏：资讯

1.在Vue项目中安装路由插件

npm install -S vue-router

2.在main.js文件中引入路由插件

import Router from 'vue-router'

3.注册路由插件

Vue.use(Router)

4.引入工单列表页组件

import OrderList from './views/order/index.vue'
import OrderEdit from './views/order/Edit.vue'
import OrderDetail from './views/order/Detail.vue'

5.对Router类进行实例化

const router = new Router({
  // routes属性是用于路由配置的属性对象
  // routes接收一个路由配置对象的数组
  mode:"history",
  routes: [
    // path 属性，用于定义访问页面组件的路由
    // component 属性，用于指定当前这个路由配置对象对应的页面组件是谁
    //重定向路由
    {
      path: '/',
      redirect: '/order/list'
    },
    {
      path: '/order/list',
      component: OrderList
    },
    {
      path: '/order/edit',
      component: OrderEdit
    },
    {
      path: '/order/detail',
      component: OrderDetail
    }
  ]
})

6.将router实例对象注入到当前Vue实例对象中

new Vue({
  // 需要把router实例对象注入到当前Vue实例对象中
  // Vue实例对象给出了一个router属性用于router的实例注册
  // (property) ComponentOptions.router?: Router
  // 组件的配置属性有一个router属性，需要一个Router实例对象
  // router: router,
  router,
  render: ce => ce(Views)
}).$mount('#app')

网站声明：如果转载，请联系本站管理员。否则一切后果自行承担。

本文链接：https://www.xckfsq.com/news/show.html?id=30992

赞同 0

评论 0 条

Vue 路由的的基本使用

1.在Vue项目中安装路由插件

2.在main.js文件中引入路由插件

3.注册路由插件

4.引入工单列表页组件

5.对Router类进行实例化

6.将router实例对象注入到当前Vue实例对象中

相关文章

关注我们