学习 Vue 路由 这一篇就够了

已于 2022-05-29 14:54:07 修改
阅读量809 收藏 7
点赞数 1
分类专栏： Vue 文章标签： vue.js
于 2022-05-04 08:37:59 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/apple_53947466/article/details/124548238
版权

目录

一、简介

1、vue 的一个插件库，专门用来实现SPA 应用

2、对SPA应用的理解

  • 单页 Web 应用（single page web application，SPA）
  • 整个应用只有一个完整的页面
  • 点击页面中的导航链接不会刷新页面，只会做页面的局部更新
  • 数据需要通过ajax请求获取

3、什么是路由?

一个路由就是一组映射关系（key - value）
key 为路径，value 可能是 function 或 componen

4、路由分类

1）后端路由：

理解：value 是 function，用于处理客户端提交的请求
工作过程：服务器接收到一个请求时，根据请求路径找到匹配的函数来处理请求，返回响应数据

2）前端路由：

理解：value 是 component，用于展示页面内容
工作过程：当浏览器的路径改变时，对应的组件就会显示

二、基本路由

1、安装 vue-router：npm i vue-router@3 （vue2 用 vue-route3) (vue3 用 vue-route4）(本教程使用vue2)

2、代码展示

src/main.js (自行在 index.html 导入bootstrap)

import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router'
import router from './router'

Vue.config.productionTip = false
Vue.use(VueRouter)

new Vue({
    el:"#app",
    render: h => h(App),
    router
})

src/router/index.js

//该文件专门用于创建整个应用的路由器
import VueRouter from "vue-router";
//引入组件
import Home from '../components/Home'
import About from '../components/About'

//创建并暴露一个路由器
export default new VueRouter({
    routes:[
        {
            path:'/about',
            component:About
        },
        {
            path:'/home',
            component:Home
        }
    ]
})

src/App.vue

<template>
  <div>
    <div class="row">
      <Banner />
    </div>
    <div class="row">
      <div class="col-xs-2 col-xs-offset-2">
        <div class="list-group">
          <!-- 原始html中我们使用a标签实现页面跳转 -->
          <!-- <a class="list-group-item active" href="./about.html">About</a>
					<a class="list-group-item" href="./home.html">Home</a> -->

          <!-- Vue中借助router-link标签实现路由的切换 -->
          <router-link class="list-group-item" active-class="active" to="/about"> About </router-link>
          <router-link class="list-group-item" active-class="active" to="/home"> Home </router-link>
        </div>
      </div>
      <div class="col-xs-6">
        <div class="panel">
          <div class="panel-body">
            <!-- 指定组件的呈现位置 -->
            <router-view></router-view>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Banner from './components/Banner.vue'
export default {
  name: 'App',
  components: { Banner }
}
</script>

src/components/Banner.vue（一般组件通常存放在 components 文件夹）

<template>
  <div class="col-xs-offset-2 col-xs-8">
    <div class="page-header">
      <h2>Vue Router Demo</h2>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Banner'
}
</script>

路由组件通常存放在 pages 文件夹

src/pages/Home.vue

<template>
  <h2>我是Home组件的内容</h2>
</template>

<script>
export default {
  name: 'Home'
}
</script>

src/pages/About.vue

<template>
  <h2>我是About组件的内容</h2>
</template>

<script>
export default {
  name: 'About'
}
</script>

3、总结

1、安装vue-router，命令：npm i vue-router
2、应用插件：Vue.use(VueRouter)
3、编写router配置项：

//引入VueRouter
import VueRouter from 'vue-router'
//引入Luyou 组件
import About from '../pages/About'
import Home from '../pages/Home'

//创建router实例对象，去管理一组一组的路由规则
export default new VueRouter({
	routes:[
		{
			path:'/about',
			component:About
		},
		{
			path:'/home',
			component:Home
		}
	]
})

4、实现切换（active-class可配置高亮样式）：

<router-link active-class="active" to="/about">About</router-link>

5、指定展示位：

<router-view></router-view>
  • 路由组件通常存放在 pages 文件夹，一般组件通常存放在 components 文件夹
  • 通过切换，“隐藏”了的路由组件，默认是被销毁掉的，需要的时候再去挂载
  • 每个组件都有自己的 $route 属性，里面存储着自己的路由信息
  • 整个应用只有一个 router，可以通过组件的 $router 属性获取到

三、多级路由

代码展示

src/pages/Home.vue

<template>
  <div>
    <h2>Home组件内容</h2>
    <div>
      <ul class="nav nav-tabs">
        <li>
          <router-link class="list-group-item" active-class="active" to="/home/news"> News </router-link>
        </li>
        <li>
          <router-link class="list-group-item" active-class="active" to="/home/message"> Message </router-link>
        </li>
      </ul>
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Home'
}
</script>

src/pages/News.vue

<template>
  <ul>
    <li>news001</li>
    <li>news002</li>
    <li>news003</li>
  </ul>
</template>

<script>
export default {
  name: 'News'
}
</script>

src/pages/Message.vue

<template>
  <ul>
    <li>
      <a href="/message1">message001</a>&nbsp;&nbsp;
    </li>
    <li>
      <a href="/message2">message002</a>&nbsp;&nbsp;
    </li>
    <li>
      <a href="/message/3">message003</a>&nbsp;&nbsp;
    </li>
  </ul>
</template>

<script>
export default {
  name: 'News'
}
</script>

src/router/index.js

//该文件专门用于创建整个应用的路由器
import VueRouter from "vue-router";
//引入组件
import Home from '../pages/Home'
import About from '../pages/About'
import News from '../pages/News'
import Message from '../pages/Message'

//创建并暴露一个路由器
export default new VueRouter({
    routes: [
        {
            path: '/about',
            component: About
        },
        {
            path: '/home',
            component: Home,
            children: [
                {
                    path: 'news',
                    component: News
                },
                {
                    path: 'message',
                    component: Message
                }
            ]
        }
    ]
})

在这里插入图片描述
在这里插入图片描述

总结

1、配置路由规则，使用children配置项：

routes:[
	{
		path:'/about',
		component:About,
	},
	{
		path:'/home',
		component:Home,
		children:[ 	//通过children配置子级路由
			{
				path:'news',    //此处一定不要写：/news
				component:News
			},
			{
				path:'message', //此处一定不要写：/message
				component:Message
			}
		]
	}
]

2、跳转（要写完整路径）：

<router-link to="/home/news">News</router-link>

四、路由的query参数

src/router.index.js

//该文件专门用于创建整个应用的路由器
import VueRouter from "vue-router";
//引入组件
import Home from '../pages/Home'
import About from '../pages/About'
import News from '../pages/News'
import Message from '../pages/Message'
import Detail from '../pages/Detail'


//创建并暴露一个路由器
export default new VueRouter({
    routes:[
        {
            path:'/about',
            component:About
        },
        {
            path:'/home',
            component:Home,
            children:[
                {
                    path:'news',
                    component:News
                },
                {
                    path:'message',
                    component:Message,
                    children:[
                        {
                            path:'detail',
                            component:Detail
                        }
                    ]
                }
            ]
        }
    ]
})

src/pages/Detail.vue (子路由为接收者)

<template>
  <ul>
    <li>消息编号：{{$route.query.id}}</li>
    <li>消息标题：{{$route.query.title}}</li>
  </ul>
</template>

<script>
export default {
  name: 'Detail'
}
</script>

src/pages/Message.vue（父路由为发送者）

<template>
  <div>
    <ul>
      <li v-for="m in messageList" :key="m.id">
        <!-- 跳转路由并携带query参数，to的字符串写法 -->
        <!-- <router-link :to="`/home/message/detail?id=${m.id}&title=${m.title}`"> {{m.title}} </router-link> -->

        <!-- 跳转路由并携带query参数，to的对象写法 -->
        <router-link :to="{ path:'/home/message/detail',query: {id:m.id, title:m.title}}"> {{m.title}} </router-link>
      </li>
    </ul>
    <hr />
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'Message',
  data() {
    return {
      messageList: [
        { id: '001', title: '消息001' },
        { id: '002', title: '消息002' },
        { id: '003', title: '消息003' }
      ]
    }
  }
}
</script>

在这里插入图片描述

总结

1、传递参数

<!-- 跳转并携带query参数，to的字符串写法 -->
<router-link :to="/home/message/detail?id=666&title=你好">跳转</router-link>
				
<!-- 跳转并携带query参数，to的对象写法 -->
<router-link :to="{
	path:'/home/message/detail',
	query:{
		id:666,
        title:'你好'
	}
}">跳转</router-link>

2、接收参数

$route.query.id
$route.query.title

五、命名路由

src/router/index.js

//该文件专门用于创建整个应用的路由器
import VueRouter from "vue-router";
//引入组件
import Home from '../pages/Home'
import About from '../pages/About'
import News from '../pages/News'
import Message from '../pages/Message'
import Detail from '../pages/Detail'


//创建并暴露一个路由器
export default new VueRouter({
    routes:[
        {
            path:'/about',
            component:About
        },
        {
            path:'/home',
            component:Home,
            children:[
                {
                    path:'news',
                    component:News
                },
                {
                    path:'message',
                    component:Message,
                    children:[
                        {
                            //name配置项为路由命名
                            name:'xiangqing',
                            path:'detail',
                            component:Detail
                        }
                    ]
                }
            ]
        }
    ]
})

src/pages/Message.vue

<template>
  <div>
    <ul>
      <li v-for="m in messageList" :key="m.id">
        <!-- 跳转路由并携带query参数，to的字符串写法 -->
        <!-- <router-link :to="`/home/message/detail?id=${m.id}&title=${m.title}`">
          {{m.title}}
        </router-link> -->

        <!-- 跳转路由并携带query参数，to的对象写法 -->
		<router-link :to="{ name:'xiangqing',query:{ id:m.id, title:m.title}}"> {{m.title}} </router-link>
		
      </li>
    </ul>
    <hr />
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'Message',
  data() {
    return {
      messageList: [
        { id: '001', title: '消息001' },
        { id: '002', title: '消息002' },
        { id: '003', title: '消息003' }
      ]
    }
  }
}
</script>

总结

1、作用：可以简化路由的跳转

如何使用：给路由命名

{
    path: '/home',
    component: Home,
    children: [
        {
            path: 'message',
            component: Message,
            children: [
                {
                    name: 'xiangqing',
                    path: 'detail',
                    component: Detail
                }
            ]
        }
    ]
}

简化跳转：

<!--简化前，需要写完整的路径 -->
<router-link to="/home/message/detail">跳转</router-link>

<!--简化后，直接通过名字跳转 -->
<router-link :to="{ name:'xiangqing'}">跳转</router-link>

<!--简化写法配合传递参数 -->
<router-link :to="{ name:'xiangqing',query:{ id:m.id, title:m.title}}"> {{m.title}} </router-link>

六、路由的params参数

src/router/index.js

//该文件专门用于创建整个应用的路由器
import VueRouter from "vue-router";
//引入组件
import Home from '../pages/Home'
import About from '../pages/About'
import News from '../pages/News'
import Message from '../pages/Message'
import Detail from '../pages/Detail'


//创建并暴露一个路由器
export default new VueRouter({
    routes: [
        {
            path: '/about',
            component: About
        },
        {
            path: '/home',
            component: Home,
            children: [
                {
                    path: 'news',
                    component: News
                },
                {
                    path: 'message',
                    component: Message,
                    children: [
                        {
                            name: 'xiangqing',
                            path: 'detail/:id/:title',
                            component: Detail
                        }
                    ]
                }
            ]
        }
    ]
})

src/pages/Message.vue（父路由发送数据）

<template>
  <div>
    <ul>
      <li v-for="m in messageList" :key="m.id">
        <!-- 跳转路由并携带query参数，to的字符串写法 -->
        <!-- <router-link :to="`/home/message/detail/${m.id}/${m.title}`"> {{m.title}} </router-link> -->

        <!-- 跳转路由并携带query参数，to的对象写法 -->
        <router-link :to="{ name:'xiangqing',params:{ id:m.id, title:m.title}}"> {{m.title}} </router-link>
      </li>
    </ul>
    <hr />
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'Message',
  data() {
    return {
      messageList: [
        { id: '001', title: '消息001' },
        { id: '002', title: '消息002' },
        { id: '003', title: '消息003' }
      ]
    }
  }
}
</script>

src/pages/Detail.vue（子路由接收数据）

<template>
  <ul>
    <li>消息编号：{{$route.params.id}}</li>
    <li>消息标题：{{$route.params.title}}</li>
  </ul>
</template>

<script>
export default {
  name: 'Detail'
}
</script>

总结

1、配置路由，声明接收params参数

{
	path:'/home',
	component:Home,
	children:[
		{
			path:'news',
			component:News
		},
		{
			component:Message,
			children:[
				{
					name:'xiangqing',
					path:'detail/:id/:title', //使用占位符声明接收params参数
					component:Detail
				}
			]
		}
	]
}

2、父路由传递参数

<!-- 跳转并携带params参数，to的字符串写法 -->
<router-link :to="`/home/message/detail/${m.id}/${m.title}`"> {{m.title}} </router-link>
				
<!-- 跳转并携带params参数，to的对象写法 -->
<router-link :to="{ name:'xiangqing',params:{ id:m.id, title:m.title}}"> {{m.title}} </router-link>

特别注意：路由携带params参数时，若使用to的对象写法，则不能使用path配置项，必须使用name配置！

3、子路由接收参数

$route.params.id
$route.params.title

七、路由的props配置

src/pages/Message.vue

<template>
  <div>
    <ul>
      <li v-for="m in messageList" :key="m.id">
        <!-- 跳转路由并携带query参数，to的对象写法 -->
        <router-link :to="{ name:'xiangqing',params:{ id:m.id, title:m.title}}"> {{m.title}} </router-link>
      </li>
    </ul>
    <hr />
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'Message',
  data() {
    return {
      messageList: [
        { id: '001', title: '消息001' },
        { id: '002', title: '消息002' },
        { id: '003', title: '消息003' }
      ]
    }
  }
}
</script>

src/router/index.js

//该文件专门用于创建整个应用的路由器
import VueRouter from "vue-router";
//引入组件
import Home from '../pages/Home'
import About from '../pages/About'
import News from '../pages/News'
import Message from '../pages/Message'
import Detail from '../pages/Detail'


//创建并暴露一个路由器
export default new VueRouter({
    routes: [
        {
            path: '/about',
            component: About
        },
        {
            path: '/home',
            component: Home,
            children: [
                {
                    path: 'news',
                    component: News
                },
                {
                    path: 'message',
                    component: Message,
                    children: [
                        {
                            name: 'xiangqing',
                            path: 'detail/:id/:title',
                            component: Detail,
                            //props的第一种写法，值为对象，该对象中的所有key-value都会以props的形式传给Detail组件。
                            // props:{a:1,b:'hello'}

                            //props的第二种写法，值为布尔值，若布尔值为真，就会把该路由组件收到的所有params参数，以props的形式传给Detail组件。
                            // props:true

                            //props的第三种写法，值为函数
                            props($route) {
                                return {
                                    id: $route.params.id,
                                    title: $route.params.title,
                                }
                            }
                        }
                    ]
                }
            ]
        }
    ]
})

src/pages/Detail.vue

<template>
    <ul>
        <li>消息编号：{{id}}</li>
        <li>消息标题：{{title}}</li>
    </ul>
</template>

<script>
    export default {
        name:'Detail',
        props:['id','title']
    }
</script>

总结：

作用：让路由组件更方便的收到参数

{
	name:'xiangqing',
	path:'detail/:id/:title',
	component:Detail,

	//第一种写法：props值为对象，该对象中所有的key-value的组合最终都会通过props传给Detail组件
	// props:{a:900}

	//第二种写法：props值为布尔值，布尔值为true，则把路由收到的所有params参数通过props传给Detail组件
	// props:true
	
	//第三种写法：props值为函数，该函数返回的对象中每一组key-value都会通过props传给Detail组件
	props(route){
		return {
			id:route.query.id,
			title:route.query.title
		}
	}
}

// 子路由接收参数
props:['id','title']

八、路由跳转的replace方法

<template>
  <div>
    <h2>Home组件内容</h2>
    <div>
      <ul class="nav nav-tabs">
        <li>
          <router-link replace class="list-group-item" active-class="active" to="/home/news"> News </router-link>
        </li>
        <li>
          <router-link replace class="list-group-item" active-class="active" to="/home/message"> Message </router-link>
        </li>
      </ul>
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Home'
}
</script>

1、作用：控制路由跳转时操作浏览器历史记录的模式

2、浏览器的历史记录有两种写入方式：push 和 replace，其中 push 是追加历史记录，replace 是替换当前记录。路由跳转时候默认为 push 方式，开启 replace 模式的路由跳转不会保存历史记录

3、开启replace模式：<router-link replace ...>News</router-link>

九、编程式路由导航

src/pages/Message.vue

<template>
  <div>
    <ul>
      <li v-for="m in messageList" :key="m.id">
        <!-- 跳转路由并携带query参数，to的字符串写法 -->
        <!-- <router-link :to="`/home/message/detail/${m.id}/${m.title}`"> {{m.title}} </router-link> -->

        <!-- 跳转路由并携带query参数，to的对象写法 -->
        <router-link :to="{ name:'xiangqing',params:{ id:m.id, title:m.title}}"> {{m.title}} </router-link>
        <button @click="showPush(m)">push查看</button>
        <button @click="showReplace(m)">replace查看</button>
      </li>
    </ul>
    <hr />
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'Message',
  data() {
    return {
      messageList: [
        { id: '001', title: '消息001' },
        { id: '002', title: '消息002' },
        { id: '003', title: '消息003' }
      ]
    }
  },
  methods: {
    showPush(m) {
      this.$router.push({
        name: 'xiangqing',
        query: {
          id: m.id,
          title: m.title
        }
      })
    },
    showReplace(m) {
      this.$router.replace({
        name: 'xiangqing',
        query: {
          id: m.id,
          title: m.title
        }
      })
    }
  }
}
</script>

作用：不借助实现路由跳转，让路由跳转更加灵活

具体编码：

methods:{
	this.$router.push({
		name:'xiangqing',
	    params:{
	        id:xxx,
	        title:xxx
	    }
	})
	
	this.$router.replace({
		name:'xiangqing',
	    params:{
	        id:xxx,
	        title:xxx
	    }
	})
	this.$router.forward() //前进
	this.$router.back() //后退
	this.$router.go() //可前进也可后退
}

十、缓存路由组件

src/pages/News.vue

<template>
  <ul>
    <li>news001 <input type="text"></li>
    <li>news002 <input type="text"></li>
    <li>news003 <input type="text"></li>
  </ul>
</template>

<script>
export default {
  name: 'News'
}
</script>

src/pages/Home.vue

<template>
  <div>
    <h2>Home组件内容</h2>
    <div>
      <ul class="nav nav-tabs">
        <li>
          <router-link class="list-group-item" active-class="active" to="/home/news"> News </router-link>
        </li>
        <li>
          <router-link class="list-group-item" active-class="active" to="/home/message"> Message </router-link>
        </li>
      </ul>
      <keep-alive include="News">
        <router-view></router-view>
      </keep-alive>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Home'
}
</script>

作用：让不展示的路由组件保持挂载，不被销毁（如此处文本框输入内容后点击其他路由，回来后文本框内容仍在）

具体编码：

<!-- 缓存一个路由组件 --> 
<keep-alive include="News"> //include中写想要缓存的组件名，不写表示全部缓存
    <router-view></router-view>
</keep-alive>

<!-- 缓存多个路由组件 -->
<keep-alive :include="['News','Message']"> 
    <router-view></router-view>
</keep-alive>

十一、activated和deactivated

src/pages/News.vue

<template>
    <ul>
        <li :style="{opacity}">欢迎学习vue</li>
        <li>news001 <input type="text"></li>
        <li>news002 <input type="text"></li>
        <li>news003 <input type="text"></li>
    </ul>
</template>

<script>
    export default {
        name:'News',
        data(){
            return{
                opacity:1
            }
        },
        activated(){
            console.log('News组件被激活了')
            this.timer = setInterval(() => {
                this.opacity -= 0.01
                if(this.opacity <= 0) this.opacity = 1
            },16)
        },
        deactivated(){
            console.log('News组件失活了')
            clearInterval(this.timer)
        }
    }
</script>

activated和deactivated是路由组件所独有的两个钩子，用于捕获路由组件的激活状态

具体使用：

  • activated路由组件被激活时触发
  • deactivated路由组件失活时触发

十二、路由守卫

12.1、全局路由守卫

src/router/index.js

//该文件专门用于创建整个应用的路由器
import VueRouter from "vue-router";
//引入组件
import Home from '../pages/Home'
import About from '../pages/About'
import News from '../pages/News'
import Message from '../pages/Message'
import Detail from '../pages/Detail'

//创建一个路由器
const router = new VueRouter({
    routes: [
        {
            name: 'guanyv',
            path: '/about',
            component: About,
            meta: { title: '关于' }
        },
        {
            name: 'zhuye',
            path: '/home',
            component: Home,
            meta: { title: '主页' },
            children: [
                {
                    name: 'xinwen',
                    path: 'news',
                    component: News,
                    meta: { isAuth: true, title: '新闻' }
                },
                {
                    name: 'xiaoxi',
                    path: 'message',
                    component: Message,
                    meta: { isAuth: true, title: '消息' },
                    children: [
                        {
                            name: 'xiangqing',
                            path: 'detail',
                            component: Detail,
                            meta: { isAuth: true, title: '详情' },
                            props($route) {
                                return {
                                    id: $route.query.id,
                                    title: $route.query.title,
                                }
                            }
                        }
                    ]
                }
            ]
        }
    ]
})

//全局前置路由守卫————初始化的时候、每次路由切换之前被调用
router.beforeEach((to, from, next) => {
    console.log('前置路由守卫', to, from)
    // 判断是否为需要验证的路由
    if (to.meta.isAuth) {
    	// 通过本地缓存进行验证
        if (localStorage.getItem('passwd') === 'laptoy') {
            next() // 放行
        } else {
            alert('未登录,无权限查看！')
        }
    } else {
        next() // 放行
    }
})

//全局后置路由守卫————初始化的时候被调用、每次路由切换之后被调用
router.afterEach((to, from) => {
    console.log('后置路由守卫', to, from)
    // 更改标题
    document.title = to.meta.title || '测试系统'
})

// 暴露路由
export default router

12.2、独享路由守卫

src/router/index.js

//该文件专门用于创建整个应用的路由器
import VueRouter from "vue-router";
//引入组件
import Home from '../pages/Home'
import About from '../pages/About'
import News from '../pages/News'
import Message from '../pages/Message'
import Detail from '../pages/Detail'


//创建一个路由器
const router = new VueRouter({
    routes:[
        {
            name:'guanyv',
            path:'/about',
            component:About,
            meta:{title:'关于'}
        },
        {
            name:'zhuye',
            path:'/home',
            component:Home,
            meta:{title:'主页'},
            children:[
                {
                    name:'xinwen',
                    path:'news',
                    component:News,
                    meta:{title:'新闻'},
                    //独享守卫，特定路由切换之后被调用
                    beforeEnter(to,from,next){
                        console.log('独享路由守卫',to,from)
                        if(localStorage.getItem('passwd') === 'laptoy'){
                            next()
                        }else{
                            alert('暂无权限查看')
                        }
                    }
                },
                {
                    name:'xiaoxi',
                    path:'message',
                    component:Message,
                    meta:{title:'消息'},
                    children:[
                        {
                            name:'xiangqing',
                            path:'detail',
                            component:Detail,
                            meta:{title:'详情'},
							props($route){
								return {
									id:$route.query.id,
									title:$route.query.title,
								}
							}
                        }
                    ]
                }
            ]
        }
    ]
})

//全局后置路由守卫————初始化的时候被调用、每次路由切换之后被调用
router.afterEach((to,from)=>{
	console.log('后置路由守卫',to,from)
	document.title = to.meta.title || '测试系统'
})

// 暴露路由
export default router

12.3、组件内路由守卫

src/pages/About.vue

<template>
  <h2>我是About组件的内容</h2>
</template>

<script>
export default {
  name: 'About',
  //通过路由规则，进入该组件时被调用
  beforeRouteEnter(to, from, next) {
    console.log('About--beforeRouteEnter', to, from)
    if (localStorage.getItem('passwd') === 'laptoy') {
      next()
    } else {
      alert('未登录，无权限查看！')
    }
  },
  //通过路由规则，离开该组件时被调用
  beforeRouteLeave(to, from, next) {
    console.log('About--beforeRouteLeave', to, from)
    next()
  }
}
</script>

十二、路由器的两种工作模式

1、对于一个url来说，什么是hash值？—— #及其后面的内容就是hash值

2、hash值不会包含在 HTTP 请求中，即：hash值不会带给服务器

3、hash模式：

  • 地址中永远带着#号，不美观
  • 若以后将地址通过第三方手机app分享，若app校验严格，则地址会被标记为不合法
  • 兼容性较好

4、history模式：

  • 地址干净，美观
  • 兼容性和hash模式相比略差
  • 应用部署上线时需要后端人员支持，解决刷新页面服务端404的问题

十三、element-ui基本使用

官方文档

1、安装 element-ui：npm i element-ui -S

2、src/main.js:

import Vue from 'vue'
import App from './App.vue'
//引入ElementUI组件库
import ElementUI from 'element-ui';
//引入ElementUI全部样式
import 'element-ui/lib/theme-chalk/index.css';

Vue.config.productionTip = false
//使用ElementUI
Vue.use(ElementUI)

new Vue({
    el:"#app",
    render: h => h(App),
})

3、src/App.vue

<template>
	<div>
		<br>
		<el-row>
			<el-button icon="el-icon-search" circle></el-button>
			<el-button type="primary" icon="el-icon-edit" circle></el-button>
			<el-button type="success" icon="el-icon-check" circle></el-button>
			<el-button type="info" icon="el-icon-message" circle></el-button>
			<el-button type="warning" icon="el-icon-star-off" circle></el-button>
			<el-button type="danger" icon="el-icon-delete" circle></el-button>
		</el-row>
	</div>
</template>

<script>
	export default {
		name:'App',
	}
</script>

在这里插入图片描述

十四、element-ui按需引入

1、安装 babel-plugin-component：npm install babel-plugin-component -D

2、修改 babel.config.js

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset',
    ["@babel/preset-env", { "modules": false }]
  ],
  plugins: [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
}

3、src/main.js

import Vue from 'vue'
import App from './App.vue'
//按需引入
import { Button,Row } from 'element-ui'	

Vue.config.productionTip = false

Vue.component(Button.name, Button);
Vue.component(Row.name, Row);
/* 或写为
 * Vue.use(Button)
 * Vue.use(Row)
 */

new Vue({
    el:"#app",
    render: h => h(App),
})
Laptoy
关注
专栏目录
Vue3学习汇总（路由篇）
weixin_50845028的博客
09-09 1109
路由篇
vue-pages:vue多页、多路由、多环境
04-27
个人项目总结及前端常用方法集锦（部分来源于网络） VUE相关 前端常用方法集锦
学习Vue Router，这一篇足够
前端三疯的博客
02-01 164
前言 Vue Router 是Vue.js的官方路由管理器。使用Vue Router 后，我们就想玩积木一样组合组件完成应用开发，基本思想：将组件映射路由，告诉Vue Router 在哪里渲染就阔以了。 基本使用步骤 安装 Vue Router npm install vue-router 在src目录下创建router/index.js文件,并注册路由 import vue from 'vue' import vueRouter from 'vue-router' // 1.注册路由插件 vue.us
【Vue实战教程】之 Vue Router 路由详解
最新发布
柯晓楠
07-23 2318
用Vue.js创建的项目是单页面应用，如果想要在项目中模拟出来类似于页面跳转的效果，就要使用路由。其实，我们不能只从字面的意思来理解路由，从字面上来看，很容易把路由联想成“路由器”。路由器的功能用一句话来概括，就是连接两个或多个网络的硬件设备。我们所说的路由，是指在一个应用程序中链接多个页面（组件）的一种配置，在一个全栈项目中，路由分为前端路由和后端路由。后端路由先来看一下后端路由，例如项目的服务器地址是页面1，地址 http://192.168.1.10:8080/index.html。
Vue-router 的练习
nqxcwl的专栏
11-02 208
使用了vue-cli 生成了一套webpack的模版。 之后在其中练习 vue-router。 以下是一些记录。 1.动态路由的配置 import Vue from 'vue' import Ro...
Vue.js框架路由练习
些许就好丶的博客
08-09 624
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name='viewport' content='width=device-width,initial-scale=1,m
Vue复习（5）：Vue-路由相关(2)
愤怒的小火柴人
03-14 1049
涉及Vue的导航守卫、路由懒加载及其滚动行为
详解vue路由篇(动态路由、路由嵌套)
12-08
在主组件 `App.vue` 中，`<router-view>` 是一个特殊的组件，用于显示根据当前路由匹配到的组件。在 `router/index.js` 文件中配置路由，比如定义一个名为 `'HelloWorld'` 的路由，它的路径为 `'/'`，并关联到 `...
vue 路由缓存 路由嵌套 路由守卫 监听物理返回操作
10-14
在Vue.js开发中，路由是页面跳转和页面状态管理的重要部分。Vue Router是Vue.js的官方路由管理器，...本篇内容涉及了这几个方面的基础知识和实际应用方法，对于希望深入学习Vue Router的开发者来说是一个很好的起点。
解决vue多个路由共用一个页面的问题
08-27
这篇文章将与您分享解决 Vue 多个路由共用一个页面的问题，具有很好的参考价值，希望对您有所帮助。 解决方法一：使用 watch 监听路由变化 在 Vue 中，可以使用 watch 监听路由的变化，当路由变化时重新加载数据。...
VUE路由案例（商品列表）---vue练习必选项目(附原码)
idiot_MAN的博客
09-28 1178
练习VUE基础知识点，练习了组件封装，父子组件之间得通信，组件插槽和组件路由，是一个很不错得练习项目。
（四）快速上手VUE 路由功能学习心得
Breanne的学习笔记
03-05 648
如果在一个模块化工程中使用它，必须要通过 Vue.use() 明确地安装路由功能： import Vue from 'vue' import VueRouter from 'vue-router' Vue.use(VueRouter) 如果使用全局的script标签，则无须如此（手动安装）。 为了结构更加清晰，因此脚手架就将router放到一个文件夹，并使用引用即可。 当做一个key值传入到 ...
Vue路由
X-77
02-18 209
什么是路由？Vue的路由 快来看看吧！
Vue路由（vue-router）详细讲解指南
精选资讯文章
06-05 6687
酷的同时也会给我们带来一些问题，因为使用路由参数时，从/user/xianyu导航到/user/mengxiang，原来的组件实例会被复用，两个路由都渲染同个组件，比起销毁再创建，显示复用显得效率更高，带来的的只管问题就是生命周期钩子函数不会再被调用，也就是不会再被触发；就这样，我们的页面就可以进行路由跳转和切换了，路由的基本使用就完成了；重定向实际上是当匹配到路径符合条件的时候去执行对应的路由，当然这个时候的url上面的地址显示的是对应的路由，页面也是对应的路由页面；
vue history路由模式设置虚拟路径
qq_42339350的博客
08-11 1405
都会去访问 xx.com/home/www/hgdoor。改为 xx.com/hgdoor/userlist 进行访问。意思为所有的 xx.com/hgdoor。如果是本地运行项目，那么到此就结束了。期望 xx.com/userlist。
vue路由----路由表的组建群
weixin_44010187的博客
07-08 902
1.在idea中新建vue项目 2.main.js中修改 import Vue from 'vue' // import Router from './Router' /*引用自同级Router.js*/ // import Router from './SonRouter' /*引用自同级SonRouter.js*/ import Router from './Component...
Vue实现高效前端路由——手动模拟路由
qq_35149975的博客
03-16 626
不光后端可以实现路由，前端也可以，开启前端路由时代
vue路由(一)介绍与实现简单的模拟路由
jianggeye7485的博客
08-25 312
一、什么是路由 路由就是对应关系。分为两大类： ① 后端路由 请求方式、请求地址与function处理函数之间的对应关系。 ② 前端路由 Hash地址与组件之间的对应关系。 工作方式： ①用户点击了页面上的路由链接 ②导致了URL地址栏中的Hash值的变化 ③前端路由监听了到Hash地址的变化 ④前端路由把当前Hash地址对应的组件渲染到浏览器中 二、SPA与前端路由的关系 在SPA项目中，不同功能之间的切换，要依赖于前端路由来完成！ 三、模拟实现简单的路由 <template> &l
理解Vue路由：静态路由详解与示例
"这篇教程详细介绍了Vue.js中的静态路由配置及其相关概念，旨在帮助学习者理解和掌握如何在Vue项目中设置和使用静态路由。" 在Vue.js开发中，路由是构建单页面应用（SPA）的核心组成部分，它允许我们通过URL路径来...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Laptoy

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值