Vue3路由
路由基础（页面跳转）
下载vue-router,vue3对应的版本是4
cnpm install vue-router@4
启动项目
npm run dev
run dev的由来
组件Home、Blog
router.js
import { createRouter,createWebHashHistory } from "vue-router";//引入创建路由的方法和哈希模式
import Home from "./components/Home.vue"//要加上.vue不让显示不出来
import Blog from "./components/Blog.vue"
const router = createRouter({
history:createWebHashHistory(),//路由模式
routes:[//配置路由
{
path:"/",//首页
component:Home//跳转到Home组件
},
{
path:"/blog",
component:Blog
}
]
});//创建路由
export default router;
main.js
import { createApp } from 'vue'
import App from './App.vue'
import './index.css'
import router from './router.js'//引入router
const app = createApp(App)
app.use(router);
app.mount('#app')
App.vue
<template>
<!--以前的写法-->
<!-- <a href="/home">首页</a> |
<a href="/blog">博客</a> -->
<router-link to="/">首页</router-link> |
<router-link to="/blog">博客</router-link>
<router-view></router-view><!--用router-view占位,换页后显示的组件放在这里-->
</template>
<script>
export default {
name: 'App',
}
</script>
路由传参（动态路由）
一个博客网站，首页是一些文章链接（列表），点击文字就会跳转到详情页，要实现这个功能
写死没有意义
router.js
import { createRouter,createWebHashHistory } from "vue-router";
import List from "./components/List.vue"
import Blog from "./components/Blog.vue"
const router = createRouter({
history:createWebHashHistory(),
routes:[
{
path:"/",
component:List
},
{
path:"/blog/:id",//跳转不同页面
component:Blog
}
]
});
export default router;
List.vue
<template>
<h1>列表</h1>
<ul>
<li v-for="item in blogList">
<!--仅仅是"/blog"就是写死的-->
<router-link :to="'/blog/' + item.id"><!--点击不同文章跳转不同页面-->
{{item.title}}
</router-link>
</li>
</ul>
</template>
<script>
export default {
data(){
return {
blogList:[
{id:1,title:"html入门1"},//列表里的对象真正来说是从后台拿的,目前就自己手写
{id:2,title:"html入门2"},
{id:3,title:"html入门3"},
{id:4,title:"html入门4"},
{id:5,title:"html入门5"}
]
}
}
}
</script>
Blog.vue
<template>
<h1>博客详情{{$route.params.id}}</h1>
<p>
{{blogContent}}
</p>
</template>
<script>
//一般来说拿到id就能到后台拿到该id的一些内容，现在没有后台就模拟功能
export default {
data(){//创建blogContent
return {
blogContent:""
}
},
created(){//页面一加载完就显示内容
let id = this.$route.params.id;
this.getBlogDataById(id);
},
methods:{
getBlogDataById(id){
switch(id){
case "1":this.blogContent = "盒子模型";break;
case "2":this.blogContent = "浮动布局";break;
case "3":this.blogContent = "flex布局";break;
case "4":this.blogContent = "grid布局";break;
case "5":this.blogContent = "css3";break;
}
}
}
}
</script>
实现登录功能
Login.vue
<template>
<h1>登录页</h1>
<form @submit.prevent="login">
<div>
<label for="">用户名</label>
<input type="text" v-model="username">
</div>
<div>
<label for="">密码</label>
<input type="password" v-model="password">
</div>
<p></p>
<button>登录</button>
</form>
</template>
<script>
export default {
data(){
return {
username:"",
password:""
}
},
methods:{
login(){
if(this.username === "admin" && this.password === "123456"){
this.$router.push("/")//实现页面跳转到首页
}else{
alert("用户名或密码错误")
}
}
}
}
</script>
token验证登录状态
上面的login只是个功能而已，没有限制，就算不登录，在地址栏输入首页照样能访问
要使登录成功后才能访问页面，就要用到token来验证
Login.vue
<template>
<h1>登录页</h1>
<form @submit.prevent="login">
<div>
<label for="">用户名</label>
<input type="text" v-model="username">
</div>
<div>
<label for="">密码</label>
<input type="password" v-model="password">
</div>
<p></p>
<button>登录</button>
</form>
</template>
<script>
export default {
data(){
return {
username:"",
password:""
}
},
methods:{
login(){
if(this.username === "admin" && this.password === "123456"){
this.$router.push("/")//实现页面跳转到首页
//localStorage.setItem能在本地（浏览器）存储数据，(第一个参数是数据名,第二个参数是数据值)
localStorage.setItem("token","2313464")
/*真正的项目开发中，登录成功后台会给前台发个token，值是一串十六进制的数
这里用localStorage模拟*/
}else{
alert("用户名或密码错误")
}
}
}
}
</script>
Logout.vue
<script>
export default {
created(){//页面一加载完就显示内容
alert("已退出")
localStorage.setItem("token","")
this.$router.push("/login")
}
}
</script>
APP.vue
<template>
<!--以前的写法-->
<!-- <a href="/home">首页</a> |
<a href="/blog">博客</a> -->
<router-link to="/">首页</router-link> |
<router-link to="/blog">博客</router-link> |
<router-link to="/logout">登出</router-link>
<router-view></router-view><!--用router-view占位,换页后显示的组件放在这里-->
</template>
<script>
export default {
name: 'App',
}
</script>
router.js
import { createRouter,createWebHashHistory } from "vue-router";
import List from "./components/List.vue"
import Blog from "./components/Blog.vue"
import Login from "./components/Login.vue"
import Logout from "./components/Logout.vue"
const router = createRouter({
history:createWebHashHistory(),
routes:[
{
path:"/",
component:List
},
{
path:"/blog/:id",
component:Blog
},
{
path:"/login",
component:Login
},
{
path:"/logout",
component:Logout
}
]
});
//路由守卫、导航守卫、路由拦截，都是一个意思
/*用路由拦截来验证登录,即router的beforeEach方法
它有三个参数 to from next
to：跳转到的目的页 from：来源页 next：放行，没有next就跳转不了*/
router.beforeEach((to,from,next) => {
//只有存在token时才能跳转到内容页
//localStorage的getItem方法能根据数据名获取它的值
let token = localStorage.getItem("token");
if(token || to.path === "/login"){//有token或者访问的是登录页
next();
}else {
next("/login");//否则让路由跳转到登录页
}
})
export default router;
