vue3-vue-router创建静态路由和动态路由方式
作者：qq_41387775
这篇文章主要介绍了vue3-vue-router创建静态路由和动态路由方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
根据官网代码搭建router遇到了很多问题
html
是指用于HTML文件里的
javascript
卸载js文件里
Vue-cli项目中使用router
1.创建router.js文件
在router.js文件里创建路由， views文件加下面存放路由跳转的页面。
遇到的一些语法问题： export 导出的属性import时需要用花括号， export default 不需要花括号, 如下方的createWebHistory放在花括号里才能用
// router/index
import { createWebHistory, createRouter } from "vue-router";
import Home from "../views/home.vue";
import About from "../views/about.vue";
import dynamicPage from "../views/dynamicHome.vue"
const routes = [
{
path: "/",
name: "home",
component: Home,
},
{
path: "/about",
name: "About",
component: About,
},
{
path: "/dynamicPage/:id",
name: "dynamicPage",
component: dynamicPage,
},
];
const router = createRouter({
history: createWebHistory(),
routes,
});
export default router;
// view/home.vue <template> <div class="home">这是首页首页</div> </template> // view/about <template> <div class="home">这是详情页</div> </template>
2.main.ts文件创建app时安装路由插件
这是vue3的用法，use安装插件时跟在createApp创建的实例后面
import { createApp } from "vue";
import App from "./App.vue";
import router from "./router"
createApp(App).use(router).mount("#app")
3.vue页面应用组件
// singleRouter
<template>
<div class="single-router">
<h3>路由跳转</h3>
<button @click="gotoAbout">go to About</button>
<div>
<router-link to="/">首页</router-link> |
<router-link to="/about">关于</router-link>
</div>
<h4>路由内容</h4>
<router-view />
<h4>结束</h4>
</div>
</template>
<script>
export default {
name: "singleRouter",
components: {},
setup() {},
methods: {
gotoAbout() {
const router = this.$router;
router.push("/about");
return {};
},
},
};
</script>
<style scoped>
.single-router {
background-color: #cccccc;
}
</style>动态路由
1.配置动态路由
router/index.js文件里设置路由时，路径后面加/:id,组件可以通过id获取，id可以取为任何名字
2.动态页面接收路由中的参数动态渲染
可以通过watch监听this.$router中的params的变化，也可以通过路由守卫beforeRouteUpdate接收路由数据，但是这里遇到了一个问题，就是第一次跳转的时候，没有的watch和beforeRouteUpdate里面，目前不知道为啥
// 动态路由指向的页面，通过接受路由中的数据动态渲染
<template>
<div class="home">pages: {{ page }}</div>
</template><script lang="ts">
import { ref } from "vue";
export default {
name: "dynamicHome",
components: {},
// problems: 第一次路由跳转，进不到watch和路由守卫里面
// created() {
// this.$watch(
// () => this.$route.params,
// (toParams, previousParams) => {
// console.log(toParams, previousParams);
// this.page = toParams.id;
// }
// );
// },
// 路由导航守卫，
beforeRouteUpdate(to, from) {
console.log(to, from);
this.page = to.params.id;
},
setup() {
const page = "未定义";
return {
page,
};
},
computed: {},
methods: {},
};
</script><style scoped>
.home {
color: #ffee05;
}
</style>3.动态路由跳转操作页面
// dymamicRouter.vue
<!-- 动态路由跳转 -->
<template>
<div class="single-router">
<h3>动态路由跳转</h3>
<button @click="gotoAbout('about')">go to About</button>
<button @click="gotoAbout('home')">go to Home</button>
<div>
<router-link to="/dynamicPage/:id=home">首页</router-link> |
<router-link to="/dynamicPage/:id=about">关于</router-link>
</div>
<h4>路由内容</h4>
<router-view />
<h4>结束</h4>
</div>
</template><script>
export default {
name: "singleRouter",
components: {},
setup() {},
methods: {
gotoAbout(val) {
const router = this.$router;
router.push(`/dynamicPage/:id=${val}`);
return {};
},
},
};
</script><style scoped>
.single-router {
background-color: #cccccc;
}
</style>App.vue主页面
主页面中使用组件
即main.ts创建的vue实例的页面，是整个应用的起始页面
// App.vue <template> <h3>单页面路由</h3> <single-router></single-router> <h3>动态路由</h3> <dynamic-router></dynamic-router> </template>
<script lang="ts">
import { ref } from "vue";
import singleRouter from "./components/singleRouter.vue";
import dynamicRouter from "./components/dynamicRouter.vue";
export default {
name: "App",
components: {
singleRouter,
dynamicRouter,
},
setup() {},
};
</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>遇到的一些问题
1.router-link, router-view未注册
这是因为在main.ts里面没有正确注册router插件
2.找不到路由定义的路径
因为router/index.js里面import的组件路径不正确
3.控制台报错
[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”
这是因为组件没有编译，vue-cli创建的项目在vue.config.js文件里加上一个配置属性
const { defineConfig } = require("@vue/cli-service");
module.exports = defineConfig({
...// 其他配置
runtimeCompiler: true, // 运行时编译
});总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。