vue3 引入导航路由

vue3 引入导航路由

vue中的导航路由可以说是很重要了，感觉是最简单的路由导航相对于传统导入bootstrap
导航路由的完成需要四个文件

1. App.vue用来挂载显示导航，当路由挂载并且注册成功之后，一定一定要记得在App.vue里面进行进行显示<router-view></router-view>没有这一步操作不会显示正确的结果
2. index.js是放在router文件下面的路由文件，里面可以放置大量的路由地址routes,

const routes = [
	{
    
    
		//此处即可当作是主界面
		path:"/",
		components:"index.vue"
	}
	{
    
    
		//此处另外导入一个login界面
		path:"/login",
		components:"login.vue"
	}
]

4.然后将routs挂载到router中

const router = creatRouter({
    
    
	//history决定路由是什么模式
	history:creatWebHistory(),
	routes
})

//最终将router暴露出来即可
export default router;

index.js完整的代码：

import {
    
    createRouter,createWebHistory} from 'vue-router'
// import routes from './'
import Examplea from "../components/ExampleA.vue"
import home from "../components/Home.vue"
import app from "../components/HelloWorld.vue"
const routes = [
    {
    
    
        path:'/',
        component:home
    },
    {
    
    
        path:'/examples',
        component:Examplea
    },
    {
    
    
        path:'/app',
        component:app
    }

]

const router = createRouter({
    
    
    //history决定路由是什么模式
    // history:localhost:8080/# 默认形式是这种形式
    history:createWebHistory(),
    routes //将routes传入到router中
})

//最后将router导出
export default router;

1. 在main.js文件中进行注册
   2.首先引入router

import router from './Router'

const app = creatApp(App)
app.use(router).mount("#app")

完整代码：

import {
    
     createApp } from 'vue'
import App from './App.vue'
// import Examplea from './components/ExampleA.vue'
import Examplea from './components/ExampleA.vue'
import router from './Router'

// const app = createApp(App)
// app.component("ExampleaA",Examplea)
const app = createApp(App)
app.use(router).mount('#app')

最后是在App.vue显示结果

<router-link to="/">Home</router-link>
<router-link to="/login">Login</router-link>

完整代码（其中routes有点出入）

<script setup>
// This starter template is using Vue 3 <script setup> SFCs
// Check out https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup
import HelloWorld from './components/HelloWorld.vue'
</script>

<template>
  <!-- <ExampleaA /> -->
  <div>
    <router-link to="/">Home</router-link> | 
    <router-link to="/examples">ExampleA</router-link> | 
    <router-link to="/app">HelloWorld</router-link>
  </div>
  <br>
  <div><router-view> </router-view></div>
</template>

<script>
// import Examplea from "./components/ExampleA.vue"
export default {
    
    
  // import {  } from "module";
  setup() {
    
    
    return{
    
     
      // Examplea
    }
  },
}
</script>


<style>
#app {
    
    
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

记录一下，工程项目没有python好学