vue的前端路由:SPA应用要做出路由效果,就得判断当前网址,然后切换组件 vue-router就是专门做切换组件的功能,它是一个单独的技术,依赖vue。
SPA(Single Page Application)单网页应用,整个网站只有一个页面。
配置路由
第一种:在入口文件通过script标签src引入资源。
如:
我们一般将包下载到项目中使用
第二种:下载vue-router包手动配置
首先 npm i vue-router --save下载到项目
然后在main.js入口文件中引入路由工具,并配置。如:
import Vue from "vue"
import VueRouter from "vue-router"//引入路由工具
import App from "./App.vue"
Vue.use(VueRouter)//注入路由,就是运行路由的相关函数和给vue绑定东西:比如$router
//创建路由工具
const router=new VueRouter({mode:"history"//常用模式
//routes路由器 生成很多网址对应的切换组件
routes:[{path:"/home",component:()=>import("./home.vue")},
{path:"/about",component:()=>import("./about.vue")}]
})
new Vue({
router,//把路由挂载到页面
render(h){return h(App)}
}).$mount("#app")
第三种:(推荐使用!!)官方脚手架中vue create "项目名" 创建项目时,选择路由功能,会帮我们自动配好。
官方配置vue-router,已经不在main.js入口文件中,而是为我们创建了一个router文件下的index.js文件专门配置,我们注册路由就在这里面注册就行了,其它都不用管导,什么导入导出就是配好了的。
使用路由
这里我们用到一个router-view标签,在App.vue文件的template模板中写上router-view标签,在页面加载时,这个标签会去判断当前网页的网址,显示对应网址(即寻找与我们注册路由的网址)的组件。
如:
注册了一个home路由:
- {
- path:"/",
- name:"home",
- component:()=>import('../views/home/index.vue')
- }
当网页中pathname为"/"时,就加载这个组件,这就是router-view标签的作用,通过判断网址加载对应的组件。
在App.vue文件中添加router-view标签,
- <div class="app">
- <h1>111h1>
- <router-view>router-view>
- div>
页面效果:
当浏览器网址没有匹配的路由它就router-view标签就相当于没有作用了,如果我们把网址改为/a
刷新页面:
只显示了App组件自身的内容。