使用 Vue Routerimport然后将路由实例传递给 Vue 实例的 router 选项

一、使用 Vue Router

在 Vue.js 中，用 Vue Router 来把组件渲染到特定页面是最流行的方法。下面来一步步教你如何操作：

安装 Vue Router

你需要安装 Vue Router。在项目根目录下运行以下命令：

npm install vue-router

创建路由配置文件

在项目目录下创建一个名为 router.js 的文件，并进行以下配置：

import Vue from 'vue';


import Router from 'vue-router';


import Home from '@/components/Home.vue';


import About from '@/components/About.vue';





Vue.use(Router);





export default new Router({


  routes: [


    {


      path: '/',


      name: 'home',


      component: Home


    },


    {


      path: '/about',


      name: 'about',


      component: About


    }


  ]


});

在主入口文件中引入路由

在 main.js 文件中引入路由配置，并将其挂载到 Vue 实例中：

import Vue from 'vue';


import App from './App.vue';


import router from './router';





new Vue({


  el: '#app',


  router,


  components: { App },


  template: ''


});

在 App.vue 中使用

通过在 App.vue 中使用 标签来渲染路由匹配的组件：

<template>


  <div id="app">


    <router-view></router-view>


  </div>


</template>

二、使用动态组件

动态组件允许你在同一个页面上根据条件渲染不同的组件。以下是具体步骤：

定义组件

创建两个组件 ComponentA 和 ComponentB：

Vue.component('component-a', {


  template: '<div>This is Component A</div>'


});





Vue.component('component-b', {


  template: '<div>This is Component B</div>'


});

在父组件中使用动态组件

在父组件中，使用 is 选项来动态切换子组件：

<template>


  <div>


    <component :is="currentComponent"></component>


    <button @click="currentComponent = 'component-b'>Show Component B</button>


  </div>


</template>

3. 如何在Vue路由中渲染组件到指定页面？

确保已经安装了 vue-router，并创建路由实例，配置路由规则。然后，将路由实例传递给 Vue 实例的 router 选项。

import Vue from 'vue';


import Router from 'vue-router';


import Home from './components/Home.vue';





Vue.use(Router);





const router = new Router({


  routes: [


    { path: '/', component: Home }


  ]


});





new Vue({


  router,


  el: '#app',


  render: h => h(App)


});