vue学习 -组件-路由

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属性的上一级