路由
在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 = [{// 引入方法1path: '/',name: 'home',component: HomeView},{// 引入方法2path: '/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(){//数据的本地存储localStoragelocalStorage.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();elsenext("/login")}elsenext() })注意：导航守护功能模块在几乎所有的应用中均能使用到。
-
在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页面，输入名字和密码登入后即可跳转页面
刷新后：
