title: 组件和路由
index_img: https://tuchuangs.com/imgs/2023/08/19/ed0d2ae1e2cddc41.png
tags:
- Java Web
- 前端
- Vue
categories:
- Java Web
excerpt: 组件和路由
组件【搭配路由使用】
全局组件(极少使用)
全局可用
注册
在vue实例外部
data应该是函数，否则每次的数据都一样，我不希望每个使用了该组件的数据都相同。
vue.component(‘组件名’，{
// data、method、template等
})
使用
支持复用，使用一次，就展示一次
<组件名></组件名>
案例
<body>
<div id="app">
<!-- 使用全局组件 -->
<login></login>
</div>
</body>
<script>
// 定义全局组件【需要在vue实例创建之前】
Vue.component('login', {
//模板语法都要用根组件包裹【内容不止一个，易语法错误】
template: '<div>用户{{username}}登录</div>',
data() {
return {
username: '张三'
}
}
});
const vm = new Vue({
el: '#app'
})
</script>
局部组件
作用域局部
注册
在vue实例内部
components: {
组件名: {
template: `<div><h1>add组件</h1></div>`
}
}
使用
支持复用，使用一次，就展示一次
<组件名></组件名>
案例
<body>
<div id="app">
<!-- 使用局部组件 -->
<add></add>
</div>
</body>
<script>
const vm = new Vue({
el: '#app',
// 定义局部组件
components: {
add: { //定义
//模板语法都要用根组件包裹【内容不止一个，易语法错误】
template: `<div><h1>add组件</h1></div>`
}
}
})
</script>
简写
<body>
<div id="app">
<!-- 使用局部组件 -->
<login></login>
<register></register>
</div>
</body>
<script>
const login = {
template: `<div><h1>用户登录</h1></div>`
}
const register = {
template: `<div><h1>用户注册</h1></div>`
}
const vm = new Vue({
el: '#app',
// 定义局部组件
components: {
login,
register
}
})
</script>
组件中的配置项
data应该是函数，否则每次的数据都一样，我们不希望每个使用了该组件的数据都相同。
<body>
<div id="app">
<!-- 使用局部组件 -->
<login></login>
<register></register>
</div>
</body>
<script>
const login = {
template: `<div><h1>用户登录{{status}}</h1></div>`,
data() {
return {
status: '成功'
}
}
methods: {
//这里的this是此组件的this
}
//其它配置项
}
const register = {
template: `<div><h1>用户注册</h1></div>`
}
const vm = new Vue({
el: '#app',
// 定义局部组件
components: {
login,
register
}
})
</script>
路由概述
- 如果所有组件都写在一个界面中，有的组件我们展示用不到，它也会全部加载，并不合理。
vue router可以使开发更加灵活，它可以根据不同的请求URL,只展示相关的组件- 将组件由Vue实例交由Vue router管理
- 创建路由对象
- Vue注册路由
- 页面中使用组件：
<router-view></router-view>
- URL和路由中的路径规则匹配上，就加载该组件
使用
<body>
<div id="app">
<!-- #使hash路由(相对绝对路由) -->
<a href="#/">首页</a>
<a href="#/login">登录</a>
<a href="#/register">注册</a>
<!-- 显示路由组件,URL匹配上就展示该组件 -->
<router-view></router-view>
</div>
</body>
<script>
const index = {
template: `<div><h1>首页</h1></div>`,
}
const login = {
template: `<div><h1>用户登录</h1></div>`,
}
const register = {
template: `<div><h1>用户注册</h1></div>`
}
const NotFind = {
template: `<div><h1>404,notFind</h1></div>`
}
// 创建路由规则对象
const router = new VueRouter({
// 对应一个组件对于一个路由，也支持redirect重定向【不是1对1时使用】
routes: [
// 格式，路径和对应组件
{ path: '/', component: index },
{ path: '/login', component: login },
{ path: '/register', component: register },
{ path: '*', component: NotFind } //404路由，写在最后，否则全匹配了
]
})
const vm = new Vue({
el: '#app',
// 注册路由
router,
})
</script>
切换路由
方式1
<a href="#/">首页</a>
<a href="#/login">登录</a>
<a href="#/register">注册</a>
方式2
不用写#
<router-link to="/">首页</router-link>
<router-link to="/login">登录</router-link>
<router-link to="/register">注册</router-link>
相同路由切换和解决
<body>
<div id="app">
<router-link to="/">首页</router-link>
<router-link to="/login">登录</router-link>
<router-link to="/register">注册</router-link>
<button @Click="change1">登录</button>
<button @Click="change2">注册</button>
<!-- 显示路由组件,URL匹配上就展示该组件 -->
<router-view></router-view>
</div>
</body>
<script>
const index = {
template: `<div><h1>首页</h1></div>`,
}
const login = {
template: `<div><h1>用户登录</h1></div>`,
}
const register = {
template: `<div><h1>用户注册</h1></div>`
}
const NotFind = {
template: `<div><h1>404,notFind</h1></div>`
}
// 创建路由规则对象
const router = new VueRouter({
// 对应一个组件对于一个路由，也支持redirect重定向【不是1对1时使用】
routes: [
// 格式，路径和对应组件
{ path: '/', component: index },
{ path: '/login', component: login },
{ path: '/register', component: register },
{ path: '*', component: NotFind } //404路由，写在最后，否则全匹配了
]
})
// 切换相同路由会出错，用这段代码解决
const originalPush = VueRouter.prototype.push
VueRouter.prototype.push = function push(location) {
return originalPush.call(this, location).catch(err => err)
}
const vm = new Vue({
el: '#app',
methods: {
change1() {
console.log(this)
// this.$route表示当前路由对象，this.$router表示路由管理器对象(由它切换)
this.$router.push('/login') //切换路由
},
change2() {
console.log(this)
this.$router.push('/register')
},
},
// 注册路由
router,
})
</script>
路由嵌套
案例：在同一个页面内操作
<body>
<div id="app">
<!-- 这里展示的是父路由 -->
<router-view></router-view>
</div>
</body>
<template id="userForm">
<div>
<h3>用户表</h3>
<table border="1">
<tr>
<th>ID</th>
<th>姓名</th>
<th>年龄</th>
<th>操作</th>
</tr>
<tr v-for="user in users">
<td>{{user.id}}</td>
<td>{{user.name}}</td>
<td>{{user.age}}</td>
<td>
<!-- 通过父路由访问 -->
<router-link to="/user/add">添加</router-link>
<router-link to="/user/det">删除</router-link>
</td>
</tr>
</table>
<!-- 展示子路由 -->
<router-view></router-view>
</div>
</template>
<script>
// user组件
const user = {
template: '#userForm', //可以使用引入的方式
data() {
return {
users: []
}
},
created() {
//假设axios请求，查询数据
this.users =
[
{ id: 1, name: 'TOm', age: 12 },
{ id: 2, name: 'java', age: 13 },
{ id: 3, name: 'python', age: 23 },
]
}
}
//add组件
const add = {
template: `<div>增加成功</div>`,
created() {
//axios添加数据
//更新表格
}
}
//删除组件
const det = {
template: `<div>删除成功</div>`,
created() {
//axios删除数据
//更新表格
}
}
//路由对象
const router = new VueRouter({
routes: [
{ path: '/', redirect: '/user' },
{
path: '/user', component: user,
children: [
// 子路由不加/
{ path: 'add', component: add },
{ path: 'det', component: det },
]
}
]
})
//vue实例
const vm = new Vue({
el: '#app',
router,
})
</script>
