客服电话
APP下载
迪恩网络APP
随时随地掌握行业动态
官方微信
扫描二维码
关注迪恩网络微信公众号
介绍
安装安装命令 npm install vue-router --save 如果在一个模块化工程中使用它，必须要通过 import Vue from 'vue' import VueRouter from 'vue-router' Vue.use(VueRouter) 模块化使用之前我们使用脚手架
import Vue from "vue";
import VueRouter from "vue-router";
import Home from "../views/Home.vue";
// 1. 当我们使用其他插件的时候，就必须使用Vue.use安装插件
Vue.use(VueRouter);
// 2. 定义路由，每个路由应该映射一个组件
const routes = [
{
path: "/",
name: "Home",
component: Home,
},
{
path: "/about",
name: "About",
component: About
},
];
// 3. 创建router实例
const router = new VueRouter({
// 配置路由和组件之间的应用关系
routes, // (缩写) 相当于 routes: routes
});
// 4. 导出router对象，然后在main.js中引用
export default router;
这个文件是专门配置路由的，最后将
import Vue from "vue";
import App from "./App.vue";
import router from "./router";
Vue.config.productionTip = false;
new Vue({
router, // 在vue实例中添加router对象，就可以使用路由了
render: (h) => h(App),
}).$mount("#app");
我们的2个组件代码
// About.vue
<template>
<div class="about">
<h1>About</h1>
</div>
</template>
<script>
export default {
name: "About"
}
</script>
<style scoped>
</style>
// Home.vue
<template>
<div class="home">
<h1>Home</h1>
</div>
</template>
<script>
export default {
name: "Home",
};
</script>
<style scoped>
</style>
最后我们在
template>
<div id="app">
<router-link to="/">首页</router-link>
<router-link to="/about">关于</router-link>
<router-view></router-view>
</div>
</template>
<style lang="scss">
</style>
使用 HTML5 history模式但是当我们启动程序，访问页面的时候， 这是因为
const router = new VueRouter({
mode: 'history',
routes: [...]
})
我们只需在 注意： 所以呢，你要在服务端增加一个覆盖所有情况的候选资源：如果 到此这篇关于vue-route路由管理的安装与配置 的文章就介绍到这了,更多相关vue route安装与配置 内容请搜索极客世界以前的文章或继续浏览下面的相关文章希望大家以后多多支持极客世界！ |
请发表评论