配置路由映射关系

1: 配置路由映射关系;  点击某一个item 时跳转到某一个页面:

 首先再router 文件夹中 index.js 文件中进行导入:

2: 在当前项目中安装路由: npm install  vue-router --save

 首先引入: import Vue  form  Vue;

 再次引入: import vueRouter form 'vue-router';

 进行懒加载操作: const  home = ()=> import ()

3: 安装插件: vueRouer:  vue.use(vueRouter)

4:创建路由对象:

  const  routers = [

  ]

 const  router = new vueRouter({

      routes,

      mode: 'history'

 })

 5: 导出router

   export default router;

6  在main.js 中 挂载: import  router form './router'

   new Vue({

      render: h => (App),

      router

   }).$mount('#app')

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
是的,这是Vue中使用vue-router实现路由的基本步骤。下面我将对每个步骤进行简要的说明: 1. 安装vue-router插件 在使用vue-router之前,需要先安装vue-router插件。可以通过npm或yarn进行安装: ``` npm install vue-router ``` ``` yarn add vue-router ``` 2. 注册路由组件 在Vue中,路由组件是一种特殊的组件,表示应用程序中的一个特定界面。在使用路由之前,需要先注册路由组件。可以通过`Vue.component`方法或者单文件组件的方式注册路由组件。 3. 创建路由实例 在创建路由实例时,需要指定路由映射关系路由映射关系是一个对象,它将URL路径映射到对应的路由组件中。可以通过`VueRouter`类来创建路由实例,如下所示: ```javascript import Vue from 'vue' import VueRouter from 'vue-router' import Home from './components/Home.vue' import About from './components/About.vue' Vue.use(VueRouter) const routes = [ { path: '/', component: Home }, { path: '/about', component: About } ] const router = new VueRouter({ routes }) ``` 在上面的代码中,我们定义了两个路由组件`Home`和`About`,并将它们的URL路径分别设置为`/`和`/about`。然后,我们使用`VueRouter`类创建了一个路由实例,并将路由映射关系传递给它。 4. 挂载路由实例 在创建路由实例之后,需要将它挂载到Vue实例中。可以通过`Vue.use`方法来安装路由插件,并通过`router`选项将路由实例传递给Vue实例,如下所示: ```javascript import Vue from 'vue' import App from './App.vue' import router from './router' new Vue({ el: '#app', router, render: h => h(App) }) ``` 在上面的代码中,我们将路由实例`router`传递给了Vue实例的`router`选项中。 5. 配置路由映射关系 在创建路由实例时,需要指定路由映射关系路由映射关系是一个对象,它将URL路径映射到对应的路由组件中。可以通过`routes`选项来配置路由映射关系,如下所示: ```javascript const routes = [ { path: '/', component: Home }, { path: '/about', component: About } ] const router = new VueRouter({ routes }) ``` 在上面的代码中,我们定义了两个路由组件`Home`和`About`,并将它们的URL路径分别设置为`/`和`/about`。然后,我们使用`routes`选项将路由映射关系传递给路由实例。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值