路由
在vue中，页面和组件都是.vue文件，可以说是一样的，结构、内容和生产方法都是一样，但是组件可以被反复使用，但页面一般只被使用一次。
路由的作用就是网页地址发生变化时，在App.vue页面的指定位置可以加载（渲染）指定的页面。
第一步
创建带路由依赖的项目
-
在命令行工具或终端中创建项目，运行命令
Vue create routerobj，在下面选项中选择标红线的选项。
-
在弹出的选项中，选择router选项，用方向键选择router，然后按空格键选定。
第二步
用vscode打开新建的routerobj文件夹，在src文件中多了router和views文件夹。
第三步
Views文件夹里面和创建组件相同的方法去创建子页面。这里举例创建两个子页面Blog.vue和Video.vue。
-
Blog.vue代码如下：
<template> <div> <ul> <li> <router-link to="">HTML教程</router-link> </li> <li> <router-link to="">JavaScript教程</router-link> </li> <li> <router-link to="">Vue教程</router-link> </li> </ul> </div> </template> -
Video.vue代码如下
<template> <div> <h1>视频</h1> <video src="" controls></video> </div> </template>
第四步
在router/index.js文件中设置路由，完成引入要设置路由的子页面和设置路由两步操作。代码如下，标注了注释的为原代码中添加的部分：
import { createRouter, createWebHashHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'
// 引入路由子页面
import Blog from '../views/Blog.vue'
import Video from '../views/Video.vue'
const routes = [
{
// 引入方法1
path: '/',
name: 'home',
component: HomeView
},
{
// 引入方法2
path: '/about',
name: 'about',
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
},
//设置路由
{
path: '/blog',
name: 'blog',
component: Blog
},
{
path: '/video',
name: 'video',
component: Video
}
]
const router = createRouter({
history: createWebHashHistory(process.env.BASE_URL),
routes
})
export default router
第五步
在App.vue中设置引用子页面，修改template部分，把要链接的子页面设置链接，router-vies标签类似于子页面占位符。
<template>
<nav>
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link>
<!-- 1.修改链接地址，router-link相当于a标签，to属性相对与href -->
<router-link to="/blog">Blog</router-link>
<router-link to="/video">Video</router-link>
</nav>
<router-view/>
</template>
第六步
在终端中运行服务器，然后就可以在浏览器中查看结果
知识扩展
安装路由，在命令行或者vscode的终端中项目路径下，运行命令 npm install --save vue-router.
没有用-g 全局安装，而是在项目中安装路由，–save表示把添加的依赖写入到package.json。如果没有–save效果上也可以，但是加上可以更好到知道项目都使用了哪些组件。
案例1：在上面的实例上添加登录功能
-
在views文件夹中新建Login.vue文件，输入如下代码：
<template> <div id ="lo"> <!-- vue中的@submit.prevent属性可以帮我们实现这个功能， 当我们点击提交按钮时，表单并不会提交，而是会触发绑定的函数 --> <form @submit.prevent="dologin"> <tr> <input type="text" v-model="username"> </tr> <tr> <input type="text"> </tr> <button>登录</button> </form> </div> </template> <script> export default{ data(){ return{ username:"" } }, methods:{ dologin(){ //数据的本地存储localStorage localStorage.setItem('usr',this.username) } } } </script> <style> #lo{ width: 100%; height: 100%; /* border: 1px solid #000000; */ display: flex; align-items: center; justify-content: space-around; } </style> -
在router文件夹中的index.js文件中配置路由
引入Login.vue子页面，代码为：import Login from ‘…/views/Login.vue’
设置路由，代码为：
{ path: '/login', name: 'login', component: Login } -
在App.vue文件中设置引入login子页面，代码如下：
<template> <nav> <router-link to="/">Home</router-link> | <!-- <router-link to="/about">About</router-link> | --> <!-- 1.修改链接地址，router-link相当于a标签，to属性相对与href --> <router-link to="/blog">Blog</router-link> | <router-link to="/video">Video</router-link> || <!-- 2.1使用login页面中的用户名数据 --> <span>欢迎{{username}}</span> || <router-link to="/login" >Login</router-link> | </nav> <router-view/> </template> <!-- 2.2链接登录子页面,要获取本地数据，为了不需要手动刷新页面需要对路由监听 --> <script> export default{ data(){ return{ // 通过localStorage.getItem获得本地数据 username:localStorage.getItem('usr') } }, watch: { // 监听路由的变化，变化后自动刷新页面 '$route.path':function(){ this.username=localStorage.getItem('usr') } } } </script>
效果图
案例2：在上述功能的基础上添加注销功能
知识链接：一个应用如果没有登录一般情况是直接进入登录页，是看不到首页等内容页，而实现这个功能的基本方法是通过“导航守护”功能。
-
在router文件加的index.js文件中增加“导航守护”功能模块，在暴露接口语句export default router 前面增加的代码如下：
// 导航守护,参数to是访问到哪里，from是从哪里访问，next是继续访问 router.beforeEach((to, from, next) => { if (to.path !== "/login") { if (localStorage.getItem("usr")) next(); else next("/login") } else next() })注意：导航守护功能模块在几乎所有的应用中均能使用到。
-
在App.vue文件中增加注销按钮，实现注销功能，注销之后用户数据被清除，要实现自动跳转到登录页面。实现代码如下，注意注释3.1~3.5部分是注销功能的实现代码。
<template> <nav> <router-link to="/">Home</router-link> || <!-- <router-link to="/about">About</router-link> | --> <!-- 1.修改链接地址，router-link相当于a标签，to属性相对与href --> <router-link to="/blog">Blog</router-link> || <router-link to="/video">Video</router-link> || <!-- 2.1使用login页面中的用户名数据 ,根据登录状态来判断是否显示欢迎--> <!-- 注销功能3.3 增加v-if属性，没有--> <span v-if="showusr">欢迎{{username}}||</span> <router-link to="/login" >Login</router-link> || <!-- 注销功能3.1增加注销按钮，绑定单击事件logout --> <button @click="logout">注销</button> </nav> <router-view/> </template> <!-- 2.2链接登录子页面,要获取本地数据，为了不需要手动刷新页面需要对路由监听 --> <script> export default{ data(){ return{ // 通过localStorage.getItem获得本地数据 username:localStorage.getItem('usr'), // 注销功能3.4 showusr参数的值绑定用户名 showusr:localStorage.getItem('usr') } }, watch: { // 监听路由的变化，变化后自动刷新页面 '$route.path':function(){ this.username=localStorage.getItem('usr') // 注销功能3.5 监听showusr的值，注销后本地数据清空 this.showusr=localStorage.getItem('usr') } }, // 注销功能3.2注销方法的实现 methods: { logout(){ // 清除本地存储 localStorage.clear(); // 清除数据后，跳转到登录页 this.$router.push("/login") } } } </script>
效果图
当前只能停留在Login页面，输入名字和密码登入后即可跳转页面
刷新后：
![[C#] 使用HttpClient请求https地址报错的解决方案](https://img-blog.csdnimg.cn/direct/2e89a6f51c77470ab8dad4e557051769.gif#pic_center)
