文章目录
vue学习的第二次记录
错误记录
ctrl+s只能保存一个文件的代码,别的文件的改动不保存,易造成错误。
组件
组件的文件是.vue
1.在vue中写组件并暴露(一定要添加配置项name)
2.在哪里使用,就引用组件(import)并注册(components)且使用
路由的使用
路由跳转的是不同的组件
1.
先写出要跳转的组件
例如Home组件和about组件
<template>
<div>
<h2>我是Home</h2>
</div>
</template>
<script lang="ts">
export default {
name:'HomeTest',
}
</script>
<style>
</style>
<template>
<div>
<h2>我是About</h2>
</div>
</template>
<script lang="ts">
export default{
name:'AboutTest',
}
</script>
<style>
</style>
引入router
安装npm i vue-router@3(vue2用3 vue3用4)
在main.js文件中引用VueRouter
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({
render: h => h(App),
//router:router
}).$mount('#app')
router:后接的是路由
3.
创建路由
在src文件夹中创建新的文件夹router用来创建index.js文件
在此文件中创建路由
先引入VueRouter和需要跳转的组件
然后暴露出路由
写路由的配置项,注意是routes不是routers
path是跳转的路径
component是跳转的组件
//创建路由器
import VueRouter from 'vue-router'
import AboutTest from '../components/AboutTest.vue'
import HomeTest from '../components/HomeTest.vue'
export default new VueRouter({
routes:[
{
path:'/AboutTest',
component:AboutTest
},
{
path:'/HomeTest',
component:HomeTest
}
],
})
然后返回main.js中引入路由router并配置router
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({
render: h => h(App),
router:router
}).$mount('#app')
路由中的router-link标签,routerview标签
router-link标签:用路由中写a标签不同于a标签的是router-link标签通过to属性指定目标地址,当地址转变后,路由器通过不同地址跳转不同组件
<router-link to="/AboutTest" active-class="active" class="list" >about</router-link>
<router-link to="/HomeTest" active-class="active" class="list" >home</router-link>
router-link标签中的不同属性
1.active-class属性:
当所属标签激活时添加一个css类,默认值可以通过路由的构造选项 linkActiveClass 来全局配置,值为css类名。
2.replace 属性:
当点击时,会调用 router.replace()而不是 router.push(),导航后不会留下历史记录,默认为false。
3.append 属性:
则在当前(相对)路径前添加基路径。例如,我们从/a 导航到一个相对路径 b,如果没有配置 append,则路径为/b,如果配了,则为/a/b
4.Tag属性:
有时候想要router-link渲染成某种标签,例如 li 于是我们使用 tag=""指定何种标签,同样它还是会监听点击,触发导航,默认值为a。
5.exact属性:
<li><router-link to="/">全局匹配</router-link></li>
<li><router-link to="/" exact>严格匹配</router-link></li>
第一个的话,如果地址是/aa,或/aa/bb,……都会匹配成功,
但加上exact,只有当地址是/时被匹配,其他都不会匹配成功
6.event属性:
添加触发事件
7.target属性:
值为"_blank",依然可以打开一个新的页面
router-view标签
跳转的组件显示的位置
组件的分类
路由组件(pages文件夹或views文件夹)
一般组件(components文件夹)
路由组件切换时是销毁和挂载
$router是全部路由
整个应用只有一个router
$route是当前路由
嵌套(多级)路由
除了写一级路由时需要写’/‘之外其他级均不需要在path配置项后加’/’
因为children已经默认添加
import VueRouter from 'vue-router'
import AboutTest from '../components/AboutTest.vue'
import HomeTest from '../components/HomeTest.vue'
import AboutTest1 from '../components/AboutTest1.vue'
import AboutTest2 from '../components/AboutTest2.vue'
export default new VueRouter({
routes:[
{
path:'/AboutTest',
component:AboutTest,
children:[
{
path:'1',//除了写一级路由时需要写'/'之外其他级均不需要在path配置项后加'/'
component:AboutTest1,
},
{
path:'2',
component:AboutTest2
}
]
},
{
path:'/HomeTest',
component:HomeTest
}
],
})
注意在写组件中的router-link时to的路径要加上父级
<router-link to="/AboutTest/1" >1111</router-link>
<router-link to="/AboutTest/2" >2222</router-link>
路由的query属性
页面间的传参
多个链接跳转到同一个组件通过传的参数不同页面显示的内容不同
1.配置路由,跳转到同一组件
2.在父级组件中通过to传参query
<li v-for=" m in massage" :key="m.id">
<router-link :to="{
path:'/AboutTest/1/11',
query:{
title:m.title,
id:m.id
}
}">
{{ m.title }}
</router-link>
</li>
3.在子级组件中通过this.$route.query.id(参数名)使用传递的参数
路由命名
配置项中添加name
:to=“{name:’ 路由的名字 '}”
路由的params参数
params可query相似
用params传参需要配置路由path:‘datail/:id/:title’
params传参,如果用to的对象写法就不能用path跳转,只能用name跳转
name:“”,
params:{}
路由的props配置
传参时有三种写法
1.在路由中为接收参数的组件的路由配置
第一种写法
props:{a:1,b:'hello'}
第二种写法,值为布尔值,会把组件收到的所有params参数,以props的形式传给子组件
props:true
第三种写法
props($route){
return {a:$route.query.id,b:$route.query.title}
}
2.在组件中接收
export default {
name:'AboutTest11',
props:['a','b'],
}
然后即可使用
replace属性
replace属性与push不同
push是添加
replace是替换,使用replace属性时,返回上级页面时将不是上一级页面而是返回未使用replace属性的上一级