测开之・《路由vue-route》
Posted 七月的小尾巴
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了测开之・《路由vue-route》相关的知识，希望对你有一定的参考价值。
路由vue-route
安装vue-route
- 使用安装命令安装
npm install vue-router
- 在main.js中进行注册
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
- 直接全局的 script 标签 引入
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
vue-router的基本使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src='./vue.js'></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
</head>
<body>
<div id="app">
<h1>hell app!</h1>
<p>
<router-link to="/login">
<button type="button">登录页</button>
</router-link>
<router-link to="/home">
<button type="button">首页</button>
</router-link>
</p>
<!--路由的出口-->
<router-view></router-view>
</div>
<script type="text/javascript">
// 1、 创建组件对象
const Login = {
template: `<h1>登录页面</h1>`
}
const Home = {
template: `<h1>项目首页</h1>`
}
// 2、 配置路由访问规则
const routes = [
{path: '/login', component:Login},
{path:'/home', component: Home}
]
// 3、 创建一个路由对象
var router = new VueRouter({
routes: routes
})
// 4、 创建vue实例，并将路由对象挂载进去
var vm = new Vue({
el: "#app",
router: router
})
</script>
</body>
</html>
编程式和声明式导航
- 声明式
<router-link to="/login">登录</router-link>
// to后面是一个对象时，要使用属性绑定
<router-link :to="{ path: '/login'}">登录</router-link>
- 编程式
在项目中我们有些时候需要主动去访问某个路由，比如登录成功之后，需要跳转到项目首页，那么 在Vue 实例内部，你可以调用 this.$router.push，主动访问某个路由。
this.$router.push('/login')
this.$router.push({path: '/login'})
路由重定向
比如我们有一个域名，期望我们直接访问域名的时候，可以进入到登录页面，那么我们可以进行路由重定向操作。
命名路由
你可以在创建 Router 实例的时候，在 routes 配置中给某个路由设置名称。
路由命名后可以直接通过name指定路由名访问
- 申明式
<router-link :to="{ name: 'login'}">登录</router-link>
- 编程式
this.$router.push({name: 'login'})
案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测开平台</title>
<script src='./vue.js'></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<style type="text/css">
.login{
width: 600px;
height: 400px;
box-shadow: 0 0 15px #000000;
margin: 150px auto;
/*设置圆角*/
border-radius: 5px;
/*内容居中*/
text-align: center;
}
.title{
color: #00aaff;
font: bold 24px/30px "microsoft sans serif";
padding: 50px 0;
}
/*设置输入框的样式*/
.login input{
width: 70%;
height: 35px;
margin-bottom: 30px;
border: solid 1px #d1d1d1;
padding: 0;
border-radius: 3px;
}
/*设置input键盘输入时，边框的样式*/
.login input:focus{
outline: none;
border: solid 1px #ffaa00;
}
/*设置按钮样式*/
.login input[type='submit']{
background: #00AAFF;
color: #fff;
}
</style>
</head>
<body>
<div id="app">
<!-- 路由的出口： 访问路径时，对应的组件在页面中显示的位置 -->
<router-view></router-view>
</div>
<script type="text/javascript">
const requestB = axios.create({
baseURL: 'http://127.0.0.1:5000',
}
)
// 1、创建组件对象
const Login = {
template: `
<div class="login">
<div class="title">接 口 自 动 化 平 台</div>
<form action="">
<input type="text" v-model="loginForm.user" placeholder=" 请输入用户名">
<input type="password" v-model="loginForm.pwd" placeholder=" 请输入密码">
<input type="button" @click="login" value="登录"/>
</form>
</div>
`,
data(){
return{
loginForm:{
user: "",
pwd: ""
}
}
},
methods: {
login(){
requestB.post('/api/user/login', this.loginForm).then((response)=>{
console.log("请求成功", response.data)
if(response.data.msg === "账号或密码有误"){
alert("账号密码错误")
}else {
alert("登录成功")
// 获取token
let token = response.data.token
console.log(token)
// 把token放到localStorage中
window.localStorage.setItem('token', token)
// 跳转到首页
this.$router.push({name: "home"})
}
})
.catch(
function(error){
console.log(error.data)
}
)
}
}
}
const Home = {
template: `
<div>
<table border="" cellspacing="" cellpadding="">
<tr>
<th>ID</th>
<th>项目名称</th>
<!-- <th>负责人</th>-->
<!-- <th>描述信息</th>-->
</tr>
<tr :key="item.id" v-for="item in projects ">
<td>{{item.id}}</td>
<td>{{item.title}}</td>
</tr>
</table>
</div>`,
data(){
return{
projects: []
}
},
methods:{
getProject(){
requestB.get(
'/api/projects',{headers: {Authorization: "Bearer" + window.localStorage.getItem('token')}}
).then((response)=>{
this.projects = response.data.results
console.log(this.projects)
}).catch(function (error){
console.log(error.message)
})
},
// 在组件（每个组件都是一个vue实例）在组件初始化完毕之后，获取项目数据
created(){
this.getProject()
}
}
}
// 2、 配置路由访问规则
const routes = [
{path: '/login', component:Login},
// 通过name给路由命名
{path:'/home', component: Home, name: "home"},
// 将路径重定向到登录页面
{path: "/", redirect: '/login'}
]
// 3、 创建一个路由对象
var router = new VueRouter({
routes: routes
})
var vm = new Vue({
el: "#app",
router: router,
})
</script>
</body>
</html>
以上是关于测开之・《路由vue-route》的主要内容，如果未能解决你的问题，请参考以下文章