5、vue项目：路由

如图：

步骤：

1、新建文件夹

在 src 下：新建 router 文件夹，再在 router 下新建 index.js

在 components 文件夹下，创建组建 About.vue Home.vue

2、安装 router 插件：

控制台输入 npm i vue-router@3，在 package.json 文件夹中查看是否安装成功

 npm i vue-router@3

3、index.js 创建路由

import Vue from 'vue'
import VueRouter from 'vue-router'
// 引入组件import About from '@/components/About.vue'import Home from '@/components/Home.vue'Vue.use(VueRouter)//  创建路由export default new VueRouter({routes:[{path:'/About',component:About},{path:'/Home',component:Home}]})

4、About.vue Home.vue 代码

<template><h1>这是  About 页面</h1>
</template><script>
import About from '@/components/About.vue';export default {name:About,
}
</script><style></style>

<template><h1>这是   Home 页面</h1>
</template><script>
import Home from '@/components/Home.vue';export default {name:Home,}
</script><style></style>

5、main.js

import Vue from 'vue'
import App from './App.vue'// 引入路由
import router from './router'Vue.config.productionTip = falsenew Vue({render: h => h(App),// 注意：router是关键router,
}).$mount('#app')

6、App.vue

<div class="left"><!-- router-link  是 router 的固定写法，等同于  a 标签，在页面解析时，会被自动转译成 a 标签 --><!-- to="About"  告诉浏览器，当点击 About 文本内容时，获取  About 组件内容 --><!-- active-class="active"  控制背景色，当用户点击 About 文本时，Home 当中的  active-class="active" 会被移除 --><!-- 注意：在该切换效果中，被移除的项 是确实从后台中被删除的，即该路由切换实际是项目反复被删除和添加的过程 --><router-link active-class="active" to="About">About</router-link><router-link active-class="active" to="Home">Home</router-link></div>

 <div class="right"><!-- 视图占位，用来展示 About  Home 的文本内容 --><router-view></router-view></div>

<template><div class="w"><div class="left"><!-- router-link  是 router 的固定写法，等同于  a 标签，在页面解析时，会被自动转译成 a 标签 --><!-- to="About"  告诉浏览器，当点击 About 文本内容时，获取  About 组件内容 --><!-- active-class="active"  控制背景色，当用户点击 About 文本时，Home 当中的  active-class="active" 会被移除 --><!-- 注意：在该切换效果中，被移除的项 是确实从后台中被删除的，即该路由切换实际是项目反复被删除和添加的过程 --><router-link active-class="active" to="About">About</router-link><router-link active-class="active" to="Home">Home</router-link></div><div class="right"><!-- 视图占位，用来展示 About  Home 的文本内容 --><router-view></router-view></div></div>
</template><script>
export default {}
</script><style>
.w{width: 500px;height: 300px;background-color: #eee;border: 1px solid #000;box-sizing: border-box;
}a{display: block;text-decoration: none;color: #000;
}
a:first-child{margin-top: 100px;margin-bottom: 20px;
}.active{background-color: blue;
}.left {float: left;width: 20%;height: 300px;border: 1px solid #000;box-sizing: border-box;text-align: center;
}.right {width: 80%;height: 300px;text-align: center;margin-top: 120px;margin-left: 100px;
}
</style>

作者是前端初学者，谨在此记录学习过程，如有错误还请各位大佬不吝赐教指出~~~谢谢

5、vue项目：路由相关推荐

解决vue项目路由出现message: “Navigating to current location (XXX) is not allowed“的问题
解决vue项目路由出现message: "Navigating to current location (XXX) is not allowed"的问题参考文章: (1)解决vu ...
解决vue项目路由出现message: “Navigating to current location (XXX) is not allowed“的问题(点击多次跳转)
解决vue项目路由出现message: "Navigating to current location (XXX) is not allowed"的问题(点击多次跳转) 参考文章: ...
vue 项目路由跳转时，ie报错缺少')'
vue 项目路由跳转时,ie报错缺少')' 报错信息解决办法报错信息 vue项目中使用了vue-echarts,项目启动后,在chrome上路由跳转没问题,但是在ie的控制台报"缺少 ...
vue项目路由 Navigating to current location (/xxxx) is not allowed
在使用vue构建项目的时候为了控制页面刷新后路由和界面保持在原来的位置加了 reloadRouter(path) {this.$router.replace({path: path,query: { ...
解决vue项目路由出现message: Navigating to current location (XXX) is not allowed的问题
今天在写一个后台界面的时候,出现了这个报错,Navigating to current location ("/userslist") is not allowed问题. &quo ...
Vue 项目路由出现 message: “Navigating to current location (XXX) is not allowed“的问题
message: "Navigating to current location (XXX) is not allowed" 原因: 在路由中添加了相同的路由解决: 重写路由的p ...
CryptoJS实现vue项目路由传参AES加密
安装: npm i crypto-js 封装方法: import CryptoJS from 'crypto-js/crypto-js';const KEY = CryptoJS.enc.Utf8.p ...
解决vue项目路由拦截跳转登录页错误
报错信息:vue-router.esm.js?8c4f:2065 Uncaught (in promise) Error: Redirected when going from "/home ...
tomcat 部署vue前端项目_Tomcat部署vue项目
1.将前端打包后的文件内容拷贝到Tomcat的webapps下,可以直接丢入一个文件夹,访问时链接需要文件夹名称.为了链接的简洁可以直接放在ROOT下. 2.此时可能遇到的问题一.启动后访问不到, ...
vue 动态路由的实现（后台数据，前台拿到数据生成侧边栏）
之前开发的vue项目路由都是写在前台的,现在公司需要把路由放在后台生成,前台用接口拿到数据,渲染成路由数据,生成左侧菜单,我之前也是参照大师兄的一篇博文,写的,然后用的过程中就有一些问题出现,比如登录 ...

5、vue项目：路由

5、vue项目：路由相关推荐

最新文章

热门文章