路由的使用

以下是一个示例代码，展示了Vue.js路由的用法：
 

// 引入Vue和Vue Router
import Vue from 'vue'
import VueRouter from 'vue-router'
 
// 导入组件
import Home from './components/Home.vue'
import About from './components/About.vue'
import Contact from './components/Contact.vue'
 
// 使用Vue Router插件
Vue.use(VueRouter)
 
// 配置路由
const router = new VueRouter({
  routes: [
    {
      path: '/',
      component: Home
    },
    {
      path: '/about',
      component: About
    },
    {
      path: '/contact',
      component: Contact
    }
  ]
})
 
// 创建Vue实例
new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

在这个例子中，我们首先导入了Vue和Vue Router，并使用Vue.use()来安装Vue Router插件。

然后，我们导入了三个组件：Home、About和Contact。

接下来，我们配置了路由，使用路由的path属性来指定URL路径，使用component属性来指定对应的组件。

最后，我们创建了一个Vue实例，将路由对象传递给它的router选项。这样，路由就能在Vue应用中使用了。

在实际的项目中，可以根据需要添加更多的路由，并在路由配置中指定对应的组件。然后，可以在组件中使用router-link来导航到不同的页面。

<template>
  <div>
    <router-link to="/">Home</router-link>
    <router-link to="/about">About</router-link>
    <router-link to="/contact">Contact</router-link>
    
    <router-view></router-view>
  </div>
</template>

在这个例子中，我们使用router-link标签来创建导航链接。to属性指定了链接的目标URL。router-view标签用于显示当前路由的组件。

这是一个简单的示例，展示了Vue路由的基本用法。在实际的项目中，还可以使用动态路由、嵌套路由、路由守卫等更高级的特性。

原文地址：https://blog.csdn.net/m0_74359467/article/details/137694695

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！