P10第10节路由【晓舟报告】从零开始学前端-Vue基础教程
之前师傅是手把手教，演示。这样我才知道。当面指出学的最快。就是npm run dev
npm run serve 他会说为什么这么写，因为dev在那边了。上班和读大学一样，散了就基本不会再见了。
即使只学了一点点，也要能说出个所以然。把这一点点东西，讲明白，心里能理清楚。韦神，对数学勤奋找到了自己人生的价值和追求，别的就不重要了。老师。以书为伴以知识围板，饮食很简单，鸡蛋1瓶矿泉水1.5升。知道自己在做什么，心中有数很重要。。
代码：
1）没弄出来，他写的那个首页是怎么显示在主键上面的。那就去看视频。 遇见问题想办法解决。
<template>
<!-- 这是主键App.vue -->
<div id="app">
<nav>
<router-link to="/Login">登录页</router-link> |
<router-link to="/">Home首页</router-link> |
<!-- <router-link to="/about">about</router-link> | -->
<router-link to="/Blog">Blog博客</router-link>|
<router-link to="/Video">Video视频</router-link>||
<span>欢迎：{{ username }}<button @click="logout">注销</button></span
>
</nav>
<!-- 是让router的页面显示的。 -->
<router-view />
</div>
</template>
<script>
export default {
data() {
return {
// username: '',
username: localStorage.getItem('usr'),
// showUser:localStorage.getItem("usr")
};
},
watch: {
'$route.path': function () {
// console.log('world');
this.username = localStorage.getItem('usr')
// this.showUser=localStorage.getItem("user")
},
},
methods: {
// logout() {
//1.注销用localStorage.clear(); 2.用路由跳转到登录页面
// localStorage.clear();
// this.$router.push('/login');
// },
// methods中写方法
// localStorage.clear();
// this.$rouer.push("/login");
// 注销的方法logout
// logout() {
// // 本地数据的注销
// localStorage.clear();
// // 由路由跳转到login登录的界面
// this.$router.push('/login');
// },
// 注销的方法
logout(){
localStorage.clear();
this.$router.push("/login")
}
},
};
</script>
<style></style>
在view文件当中的文件
<template>
<!-- 这是views文件夹下面的HomeView.vue文件 -->
<div class="home">
<img alt="Vue logo" src="../assets/logo.png">
<HelloWorld msg="Welcome to Your Vue.js App"/>
</div>
</template>
<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'
export default {
name: 'HomeView',
components: {
HelloWorld
}
}
</script>
<template>
<!-- 这是views文件夹下面的BlogView.vue文件 -->
<div>
<h1>blog</h1>
<ul>
<li><router-link to="">javascript教程 </router-link></li>
<li><router-link to="">nodejs教程</router-link></li>
</ul>
</div>
</template>
<script>
export default {};
</script>
<style></style>
<template>
<!-- 这是views文件夹下面的AboutView.vue文件 -->
<div class="about">
<h1>This is an about page</h1>
</div>
</template>
<template>
<div>
<!-- 这是views文件夹下面的VideoView.vue文件 -->
<video src="" controls></video>
</div>
</template>
<script>
export default {};
</script>
<style></style>
<template>
<div>
<!-- 这是views文件夹下面的LoginView.vue文件 -->
<form @submit.prevent="doLogin">
<h1>首页</h1>
<input type="text" placeholder="用户名" v-model="username" />
<input type="password" placeholder="密码" />
<button>点击登录</button>
</form>
</div>
</template>
<script>
export default {
data() {
// 创建数据要return数据 多改正几次bug就知道了 v-model绑定数据，双向绑定。
return {
username: '',
};
},
methods: {
// methods中写方法
doLogin() {
// 命令行输出username
console.log('this.username');
// 本地存储 username 将数据进行本地保存。
localStorage.setItem('usr', this.username);
//用导航的功能，用一个push方法，后面写的/地址就可以跳转到对应的地址了。将页面路由跳转。
this.$router.push('/');
//本地获取到username
localStorage.getItem('user');
},
},
};
</script>
router的文件
// index.js文件夹中定义整体路由跳转的方式 写路由 的文件 import Vue from 'vue'; import VueRouter from 'vue-router'; import HomeView from '../views/HomeView.vue'; import BlogView from '../views/BlogView'; import VideoView from '../views/VideoView'; // 导入组件 import LoginView from '../views/LoginView'; Vue.use(VueRouter); // 定义数组变量 const routes = [ { //导入组件。把组件配置到这个环境里。这边path里的值的 内容和 route-link里的值 是一样的。 path: '/', name: 'home', component: HomeView, }, { path: '/blog', name: 'Blog', component: BlogView, }, { // 写path的时候会变成小写的样子。 path: '/Video', name: 'Video', component: VideoView, }, { path: '/Login', name: 'Login', component: LoginView, }, ]; const router = new VueRouter({ mode: 'history', base: process.env.BASE_URL, routes, }); // 导航守卫 // router.beforeEach((to, from, next) => { // 先检测一下，看看有没有效果。 // console.log('hello world'); // if (to.path !== './Login') { // if (localStorage.getItem('usr')) { // next(); // } // } else { // next(); // } // }); export default router;
2）那就重新看视频，看一下它在主键文件中是怎么写的。
第1个是路由文件router.index导入文件写好配置。第2个是App..vue显示页面，写路由进去显示出来。第3个是登录文件Login.vue文件。
看着敲出来了。有逻辑的。
<template>
<!-- 这是主键App.vue -->
<div id="app">
<nav>
<!-- router-link就相当于a标签的作用。 -->
<!-- <router-link to="/Login">登录页</router-link> | -->
<router-link to="/">Home首页</router-link> |
<router-link to="/Blog">Blog博客</router-link>|
<router-link to="/Video">Video视频</router-link>||
<!-- 注销的时候这个不可见。 -->
<span v-if="showUser">欢迎：{{ username }}
<!-- 注销的按钮事件。点击按钮引发的注销事件。把注销的方法写到方法里面。 -->
<button @click="logout">注销</button>
<!-- <button @click="logout">注销</button> -->
</span>
</nav>
<!-- 是让router的页面显示的。 -->
<router-view />
</div>
</template>
<script>
export default {
data(){
return{
username:localStorage.getItem("usr"),
showUser:true
}
},
// 监听变量
watch:{
//侦听函数的路径的变化
"$route.path":function(){
// 这个是检测的，页面切换的时候命令行就会出现world
// console.log("world")
// 当页面切换的时候，就是直接把this.username的值变成localStorage.getItem("usr")
this.username=localStorage.getItem("usr")
this.showUser=localStorage.getItem("usr")
}
},
methods:{
logout(){
// 清空本地存储。
localStorage.clear();
// 跳转到/login 的页面。
this.$router.push("/login")
}
}
};
</script>
<style></style>
<template>
<div>
<!-- 这是views文件夹下面的VideoView.vue文件 -->
<video src="" controls></video>
</div>
</template>
<script>
export default {};
</script>
<style></style>
<template>
<div>
<!-- 这是views文件夹下面的LoginView.vue文件登录页面 解决当下遇见的问题。 -->
<!-- 提交表单@submit.prevent="doLogin" submit就是提交方法，在写方法的methods中写方法doLogin-->
<form @submit.prevent="doLogin">
<h1>首页</h1>
<!-- 双向绑定,绑定字符串username -->
<input type="text" placeholder="用户名" v-model="username" />
<input type="password" placeholder="密码" />
<button>点击登录</button>
</form>
</div>
</template>
<script>
export default {
data() {
// 创建数据要return数据 多改正几次bug就知道了 v-model绑定数据，双向绑定。
return {
// 新建变量
username: '',
};
},
methods: {
// methods中写方法
// doLogin方法实现表单提交，数据本地保存，提交之后实现页面跳转。
doLogin(){
// 命令行输出username
// console.log('this.username');
// 本地存储 username 将数据进行本地保存。localStorage是个对象，后面是setItem方法 变量的值是usr,设置成this.username 这样就把username在本地存储了。
localStorage.setItem("usr", this.username);
//本地获取到username getItem方法就可以拿到本地存储的。 存起来了之后，在哪显示出来呢？在App.vue中显示出来的。。把localStorage.getItem('user')赋值给username 。
// localStorage.getItem('user');
// push('/')实现页面跳转。用导航的功能，用一个push方法，后面写的/地址就可以跳转到对应的地址了。将页面路由跳转。可以用$router的push方法，可以把它跳转到网页挑战到首页了。
this.$router.push("/");
},
},
};
</script>
<template>
<!-- 这是views文件夹下面的HomeView.vue文件 -->
<div class="home">
<h1>首页</h1>
</div>
</template>
<script>
// @ is an alias to /src
export default {
}
</script>
<template>
<!-- 这是views文件夹下面的BlogView.vue文件 -->
<div>
<h1>blog</h1>
<ul>
<li><router-link to="">javascript教程 </router-link></li>
<li><router-link to="">nodejs教程</router-link></li>
</ul>
</div>
</template>
<script>
export default {};
</script>
<style></style>
<template>
<!-- 这是views文件夹下面的AboutView.vue文件 -->
<div class="about">
<h1>This is an about page</h1>
</div>
</template>
路由文件router文件夹下面的index.js文件
// index.js文件夹中定义整体路由跳转的方式 写路由 的文件 import Vue from 'vue'; import VueRouter from 'vue-router'; import HomeView from '../views/HomeView.vue'; // 引入组件。 import BlogView from '../views/BlogView'; import VideoView from '../views/VideoView'; // 导入组件 import LoginView from '../views/LoginView'; Vue.use(VueRouter); // 定义数组变量 const routes = [ { // 导入组件。把组件配置到这个环境里。这边path里的值的 内容和 route-link里的值 是一样的。 path: '/', name: 'home', component: HomeView, }, { path: '/blog', name: 'Blog', component:BlogView }, { // 写path的时候会变成小写的样子。 path: '/video', name: 'Video', component: VideoView }, { // 写Login的路由 path: '/Login', name: 'Login', component: LoginView, }, ]; const router = new VueRouter({ mode: 'history', base: process.env.BASE_URL, routes, }); // 导航守卫 to是访问到哪，from是从哪访问 next是继续访问。 router.beforeEach((to, from, next) => { // 先检测一下，看看有没有效果。 // console.log('hello world'); if (to.path !== '/Login') { if (localStorage.getItem('usr')) { next(); }else { // 如果不是，可以将它重定向，定向到Login这边。 next("/Login"); } }else { next(); } }); export default router;
3）第3遍
<template>
<div>
<!-- 这是Login页面 -->
<h1>登录页</h1>
<form @submit.prevent="doLogin">
<input type="text" placeholder="用户名" v-model="username">
<input type="password" placeholder="密码">
<button>点击登录</button>
</form>
</div>
</template>
<script>
export default {
data(){
return{
username:""
}
},
methods:{
doLogin(){
// 本地存储数据。localStorage是对象。对象有个方法是setItem("usr",this.username) 设置一个变量usr 把它的值设置为this.username 就把数据存起来了。
localStorage.setItem("usr",this.username);
// localStorage.getItem("usr"); 就可以拿到这个数据的值了。
// 路由切换到首页的路径。编程式导航的功能。this.$router能找到这个对象，再用push的方法。
this.$router.push("/");
}
}
}
</script>
<style>
</style>
// router文件夹下的index.js文件夹中定义整体路由跳转的方式 写路由 的文件 // 导入组件，之后再配置路由。 import Vue from 'vue'; import VueRouter from 'vue-router'; import HomeView from '../views/HomeView' import BlogView from '../views/BlogView' import VideoView from '../views/VideoView' import LoginView from '../views/LoginView' Vue.use(VueRouter); // 定义数组变量 const routes = [ { // 导入组件。把组件配置到这个环境里。这边path里的值的 内容和 route-link里的值 是一样的。 // 写path的时候会变成小写的样子。组件component path: '/', name: 'home', component: HomeView, }, { path: '/blog', name: 'Blog', component:BlogView }, { path: '/video', name: 'Video', component:VideoView }, { // 写Login登录页的路由 path: '/Login', name: 'Login', component: LoginView, }, ]; const router = new VueRouter({ mode: 'history', base: process.env.BASE_URL, routes, }); // 导航守卫 to是访问到哪，from是从哪访问 next是继续访问。 router.beforeEach((to, from, next) => { // 先检测一下，看看有没有效果。 // console.log('hello world'); if (to.path !== '/Login') { if (localStorage.getItem('usr')) { next(); }else { // 如果不是，可以将它重定向，定向到Login这边。 next("/Login"); } }else { next(); } }); export default router;
<template>
<div>
<!-- 这是显示的主键界面App.vue -->
<router-link to="/">home首页</router-link>|
<router-link to="/blog">blog博客</router-link>|
<router-link to="/video">video视频</router-link>||
<!-- 路由显示 -->
<span v-if="showUser">
欢迎：{{username}}
<button @click="logout">点击注销</button>
</span>
<router-view/>
</div>
</template>
<script>
export default {
data(){
return{
// 为什么要写在这边呢？因为这边需要显示数据。
username:localStorage.getItem("usr"),
// showUser:true
showUser:localStorage.getItem("usr")
}
},
watch:{
// 侦听函数路径的变化。
'$route.path':function(){
// 这个监听数据写了之后才会有效果。
this.username=localStorage.getItem("usr");
this.showUser=localStorage.getItem("usr")
}
},
methods:{
logout(){
// 1.清空数据clear方法后面要有括号() 2.路由切换到登录的网页。
localStorage.clear();
this.$router.push("/Login");
}
}
}
</script>
<style>
</style>
<template>
<div>
<!-- 这是views文件夹下面的BlogView.vue文件 -->
<ul>
<li>
<router-link to="">Java语言</router-link>
</li>
<li>
<router-link to="">axios请求</router-link>
</li>
<li>
<router-link to="">JavaScript语言</router-link>
</li>
</ul>
</div>
</template>
<script>
export default {
}
</script>
<style>
</style>
<template>
<div>
<!-- 这是views文件夹下面的VideoView.vue文件 -->
<video src="" controls></video>
</div>
</template>
<script>
export default {};
</script>
<style></style>
<template>
<!-- 这是views文件夹下面的AboutView.vue文件 -->
<div class="about">
<h1>This is an about page</h1>
</div>
</template>
4）第4遍
<template>
<div>
<h1 style="color:grey;">这是主键显示页面</h1>
<!-- 这是主键显示页面 -->
<router-link to="/">home首页</router-link> |
<router-link to="/blog">博客blog</router-link> |
<router-link to="/video">视频video</router-link> ||
<!-- 路由显示 -->
<!-- v-if当注销之后，不显示这边的文字。 -->
<span v-if="showUser">
欢迎：{{username}}
<button @click="logout">注销按钮</button>
</span>
<!-- 为什么不显示呢？要在router-view才能显示出来啊 -->
<router-view/>
</div>
</template>
<script>
export default {
data(){
return{
//获取数据。为什么要在这边获取数据呢？？是因为上面的欢迎要显示。后面要用到这个数据匹配这个页面点击能否访问。路由侦听。 我的知识还没学完。
username:localStorage.getItem("usr"),
// showUser新建数据 showUser有数值的时候就是正的值显示数据，showUser没有数值的时候就是0就不显示。打好基本功。
// showUser:true,
showUser:localStorage.getItem("usr")
}
},
// 监听器
watch:{
// 监听函数路径的变化
'$route.path':function(){
// 这个监听数据写了之后才会有效果。
this.username=localStorage.getItem("usr");
this.showUser=localStorage.getItem("usr");
}
},
methods:{
logout(){
// 注销里面的数据。 clear方法clear()
localStorage.clear();
// 导航到登录页
this.$router.push("/login");
}
}
}
</script>
<style>
</style>
// index.js文件夹中定义整体路由跳转的方式 写路由 的文件 // 导入组件，之后再配置路由。 import Vue from 'vue'; import VueRouter from 'vue-router'; import HomeView from '../views/HomeView' import BlogView from '../views/BlogView' import VideoView from '../views/VideoView' import LoginView from '../views/LoginView' Vue.use(VueRouter); // 定义数组变量 const routes = [ { // 导入组件。把组件配置到这个环境里。这边path里的值的 内容和 route-link里的值 是一样的。 // 写path的时候会变成小写的样子。组件component path: '/', name: 'home', component: HomeView, }, { path: '/blog', name: 'Blog', component:BlogView }, { path: '/video', name: 'Video', component:VideoView }, { // 写Login登录页的路由 path: '/Login', name: 'Login', component: LoginView, }, ]; const router = new VueRouter({ mode: 'history', base: process.env.BASE_URL, routes, }); // // 导航守卫 to是访问到哪，from是从哪访问 next是继续访问。 // router.beforeEach((to, from, next) => { // // 先检测一下，看看有没有效果。 // // console.log('hello world'); // if (to.path !== '/Login') { // if (localStorage.getItem('usr')) { // next(); // }else { // // 如果不是，可以将它重定向，定向到Login这边。 // next("/Login"); // } // }else { // next(); // } // }); // 导航守卫 to是访问去哪，from是从哪访问，next是继续访问。 router.beforeEach((to, from, next)=>{ //先检测一下，看看有没有效果。 // console.log("hello world"); if (to.path !== '/Login') { if (localStorage.getItem("usr")) { next(); } else { next("/Login"); } } else { next(); } }); export default router;
<template>
<div>
<!-- 这是LoginView登录页面 -->
<!-- form表单中，在form中写提交数据事件，在button点击的时候就可以接收到 -->
<h1>这是登录页</h1>
<form @click.prevent="doLogin">
<input type="text" v-model="username" placeholder="用户名">
<input type="password" placeholder="密码">
<button>点击登录</button>
</form>
</div>
</template>
<script>
export default {
// 声明变量
data(){
return{
username:""
}
},
methods:{
doLogin(){
// 本地存储数据
localStorage.setItem("usr",this.username);
// 路由切换路径
this.$router.push("/");
}
}
}
</script>
<style>
</style>
<template>
<div>
<!-- 这是views文件夹下面的VideoView.vue文件 -->
<h1>这是video文件</h1>
<video src="" controls></video>
</div>
</template>
<script>
export default {};
</script>
<style></style>
<template>
<div>
<!-- 这是views文件夹下面的BlogView.vue文件 -->
<ul>
<li>
<router-link to="">Java语言</router-link>
</li>
<li>
<router-link to="">axios请求</router-link>
</li>
<li>
<router-link to="">JavaScript语言</router-link>
</li>
</ul>
</div>
</template>
<script>
export default {
}
</script>
<style>
</style>
<template>
<!-- 这是views文件夹下面的HomeView.vue文件 -->
<div class="home">
<h1>首页</h1>
</div>
</template>
<script>
// @ is an alias to /src
export default {
}
</script>
<template>
<!-- 这是views文件夹下面的AboutView.vue文件 -->
<div class="about">
<h1>This is an about page</h1>
</div>
</template>
未登录的页面
登录完成之后的页面：
5）第5遍 认真做
// index.js文件夹中定义整体路由跳转的方式 写路由 的文件 // 第一步先1）导入组件，之后再2）配置路由。 import Vue from 'vue'; import VueRouter from 'vue-router'; import HomeView from '../views/HomeView' import BlogView from '../views/BlogView' import VideoView from '../views/VideoView' import LoginView from '../views/LoginView' Vue.use(VueRouter); // 定义数组变量 const routes = [ { // 导入组件。把组件配置到这个环境里。这边path里的值的 内容和 route-link里的值 是一样的。 // 写path的时候会变成小写的样子。组件component path: '/', name: 'home', component: HomeView, }, { path: '/blog', name: 'Blog', component:BlogView }, { path: '/video', name: 'Video', component:VideoView }, { // 写Login登录页的路由 path: '/Login', name: 'Login', component: LoginView, }, ]; const router = new VueRouter({ mode: 'history', base: process.env.BASE_URL, routes, }); // // 导航守卫 to是访问到哪，from是从哪访问 next是继续访问。 // router.beforeEach((to, from, next) => { // // 先检测一下，看看有没有效果。 // // console.log('hello world'); // if (to.path !== '/Login') { // if (localStorage.getItem('usr')) { // next(); // }else { // // 如果不是，可以将它重定向，定向到Login这边。 // next("/Login"); // } // }else { // next(); // } // }); // // 导航守卫 to是访问去哪，from是从哪访问，next是继续访问。 // router.beforeEach((to, from, next)=>{ // //先检测一下，看看有没有效果。 // // console.log("hello world"); // if (to.path !== '/Login') { // if (localStorage.getItem("usr")) { // next(); // } else { // next("/Login"); // } // } else { next(); } // }); // 导航守卫 // router.beforeEach((to, from, next) => { // if (to.path !== '/login') { // if (localStorage.getItem("usr")) { // next(); // } else { // next("/login") // } // } // else { // next() // } // }) // 控制权限，导航守卫 to是去哪，from是从哪，next是继续访问 router.beforeEach((to, from, next) => { if (to.path !== "/Login") { if (localStorage.getItem("usr")) { next(); } else { next("/Login"); } } else { next(); } }) export default router;
<template>
<div>
<h1>这是显示的App.vue文件</h1>
<router-link to="/">主页home</router-link> |
<router-link to="/blog">博客blog</router-link> |
<router-link to="/video">视频video</router-link> ||
<!-- 写router-link的时候一定要写router-view显示数据 -->
<!-- v-if判断能否显示。 -->
<span v-if="showUser">
欢迎你：{{username}}
<button @click="logout">点击注销</button>
</span>
<router-view/>
</div>
</template>
<script>
export default {
data(){
return{
username:localStorage.getItem("usr"),
showUser:localStorage.getItem("usr")
}
},
// 侦听器功能 侦听路由路径 把侦听器写在方法的前面 route.path。
watch:{
'$route.path':function(){
this.username=localStorage.getItem("usr")
this.showUser=localStorage.getItem("usr")
}
},
methods:{
logout(){
localStorage.clear()
this.$router.push("/Login")
}
}
}
</script>
<style>
</style>
<template>
<div>
<h1>这是login登录网页</h1>
<form @submit.prevent="doLogin">
<input type="text" placeholder="关键字" v-model="username">
<input type="password" placeholder="密码">
<button>点击登录</button>
</form>
</div>
</template>
<script>
export default {
data(){
return{
username:""
}
},
methods:{
doLogin(){
localStorage.setItem("usr",this.username)
// 刷新数据
this.$router.push("/")
}
},
}
</script>
<style>
</style>
<template>
<div>
<!-- -->
<h1>这是博客Blog</h1>
<ul>
<li>
<router-link to="">Java课程</router-link>
</li>
<li>
<router-link to="">node课程</router-link>
</li>
<li>
<router-link to="">前端课程</router-link>
</li>
</ul>
</div>
</template>
<script>
export default {
}
</script>
<style>
</style>
<template>
<div>
<!-- 这是主页home -->
<h1>这是主页Home</h1>
</div>
</template>
<script>
export default {
}
</script>
<style>
</style>
<template>
<div>
<h1>这个是video页面</h1>
<video src="" controls></video>
</div>
</template>
<script>
export default {
}
</script>
<style>
</style>
6）第6遍 认真做
最重要的文件就是显示文件App.vue文件，router文件夹下的index.js文件，Login.vue登录文件。
努力是不辜负自己，独立才能不拖累别人，同龄人在升学，学历是自己的资本，工整是有自己的正确的习惯。
