vue3 实战之 添加路由

vite搭建了一个小demo

添加一些路由，发现好像写法不一样了。踩坑踩得的头疼。

首先是路由的版本

"vue": "^3.0.4", "vue-router": "^4.0.8"

之前用得3.几的版本，一直报错。

试了好几种添加路由的方式，跟着官网例子敲了很多，但是都不行，自己找了很多原因。

试了下来，有以下几种添加路由的方式。

第一种：

//main.js
import { createApp,h} from 'vue'
import {createRouter,createWebHashHistory} from 'vue-router'
import './index.css'
import Foo from './components/Foo.vue'
import About from './components/About.vue'
const NotFoundComponent = { template: '<p>Page not found</p>' }
const HomeComponent = { template: '<p>Home page</p>' }
const AboutComponent = { template: '<p>About page</p>' }
const routes2 = {
  '/': Foo, //  '/':NotFoundComponent
  '/about': About  //   '/about': HomeComponent
}
const SimpleRouter = {
    data: () => ({
        currentRoute: window.location.pathname
    }),
    computed: {
        CurrentComponent() {
            return routes2[this.currentRoute] || NotFoundComponent
        }
    },
    render() {
        return h(this.CurrentComponent)
    }
}
createApp(SimpleRouter).mount('#app')

第二种

// main.js
import { createApp,h} from 'vue'
import App from './App.vue'
import './index.css'
import router from './router'
createApp(App).use(router).mount('#app')

// router/index.js
import {createApp,h} from 'vue'
import { createRouter, createWebHistory } from 'vue-router'
import HelloWorld from '../components/HelloWorld.vue'
const NotFoundComponent = { template: '<p>Page not found</p>' }

// 创建一个Vue 应用
const app = createApp({})
const routes = [
  { path: '/foo', component: NotFoundComponent },
    { path: '/helloWorld', component: HelloWorld }
  ]
  
const router = createRouter({
  history: createWebHistory(),
  routes:routes
})

export default router

第三种

// main.js
import { createApp,h} from 'vue'
import App from './App.vue'
import './index.css'

import {createRouter,createWebHashHistory} from 'vue-router'
import Foo from './components/Foo.vue'
import About from './components/About.vue'
const NotFoundComponent = { template: '<p>Page not found</p>' }
const HomeComponent = { template: '<p>Home page</p>' }

const routes3 = [
    { path: '/', component: NotFoundComponent },
    { path: '/home', component: HomeComponent },
    { path: '/foo', component: Foo },
    { path: '/about', component: About },
  ]

const router = createRouter({
    history: createWebHashHistory(),
    routes: routes3, // short for `routes: routes`    
  })
const app = createApp(App)
app.use(router)
app.mount('#app')

另外还在根目录下添加了一个vite.config.js 文件

// vite.config.js
export default {
	alias: {
        'vue': 'vue/dist/vue.esm-bundler.js' // 定义vue的别名，如果使用其他的插件，可能会用到别名
    },
    port: 8080,
}

如果上面的alias配置不添加的话，会有个报错

runtime-dom.esm-bundler-27cc3dc4.js:1221 [Vue warn]: Component provided template option but runtime compilation is not supported in this build of Vue. Configure your bundler to alias "vue" to "vue/dist/vue.esm-bundler.js". at <Anonymous onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< undefined > > at <RouterView> at <App>

这就会造成

const NotFoundComponent = { template: '<p>Page not found</p>' }

这个方式的路由组件不加载到页面上。

vue3添加路由的基础例子大致是这么个情况吧。