vue3+ts项目的基本路由配置

导入router

首先在main.ts文件中导入router，并将其use入app中让其挂载。

import router from './router';
app.use(router)

这样就可以在app中导入router了。

路由文件index.ts配置

为了更标准，我们在src文件中创立一个router文件夹，然后在文件夹中创建index.ts文件。

在index文件中，我们就可以将组件的路径记录到其中，这样就可以按照需要访问组件了。

import { createRouter, createWebHistory } from "vue-router";
import Home from '@/components/Home.vue'

const router = createRouter({
    history:createWebHistory(),
    routes:[
        {
           name:'shouye'
           path:'/Home' ,
           component: Home,
        }
    ]
})

//将router暴露出去(default 默认)
export default router

我们先导入createRouter和createWebHistory(或createWebHashHistory)，然后再const一个router对象，里面存入history和routes。像这里我导入的是Home.vue组件，然后就可以在routes中写入path和component(path可以和组件的名字不一样，而且浏览器地址栏是不区分大小写的)。在router中history是必不可少的，其中有两种模式可以选择，我们这里选择createWebHistory。

最后不要忘记将router方法暴露出去。

这样我们就已经可以访问”/home”组件了，但是我们的组件应该要配合layout来显示，具体放在页面的那个地方才合适呢？

控制组件存放位置

使用中存放组件的位置用RouterView标签，触发标签用RouterLink标签。

首先我们还是一样要在script中导入RouterView，RouterLink：

import { RouterView, RouterLink } from 'vue-router'

然后就可以在template中使用了：

<div :style="{ padding: '24px', background: '#fff', minHeight: '600px' }">
  <RouterView></RouterView>          
</div>

其中组件都会在RouterView的位置显示。而我们触发事件就要：

<RouterLink to="/home">  首页 </RouterLink>

这里需要配合button等来配合使用。

当然考虑到地址的变化，也可以这样写RouterLink：

<RouterLink :to="{path:/home}">  首页 </RouterLink>

或者：

<RouterLink :to="{name:shouye}">  首页 </RouterLink>

子路由配置

我们上面配置都是一级路由，而二级子路由要怎么配置呢？

首先我们找到index.ts文件，再里面添加children在path中：

const router = createRouter({
    history:createWebHistory(),
    routes:[
        {
           name:'shouye',
           path:'/Home' ,
           component:Home,
           children:[
            	{
            		path:'detail', //不要加斜杠
            		component:Detail,
        		}
            ]
        }
    ]
})

然后我们只需在RouterLink里面修改to的路径就可以了，也就是我们可以localhost/home/detail来访问子组件了。

路由传参方法

query

使用query传参我们需要在RouterLink的to中加入需要传入的值，比如我们想传给子组件“qq”一词：

<RouterLink to="/detail?a=qq&b=kk"></RouterLink>  

可以看到我给子组件通过“路径?变量=值”将值传递，然后在子组件中我们需要再导入router接收传递的信息，就可以使用了：

import { useRoute } from 'vue-router';
let route = useRoute()

html:

{{ route.query.a }}

这样就可以在页面中呈现了。

顺便我们log route一下就可以看到页面传递的值：

而如果我们需要通过for来改变传递的值，可以按照示例中这样写：

<a-col class="gutter-row" :span="6" v-for="shops in datashop" >
  <RouterLink :to="`/detail?a=${shops.id}`">
    <div class="gutter-box">{{ shops.title }}</div>
  </RouterLink>  
</a-col>

或者：

<a-col class="gutter-row" :span="6" v-for="shops in datashop" >
  <RouterLink 
  	:to="{
		path:'/detail'                   
    	query:{
         	a:shops.id,
        }
    }"
  >
    <div class="gutter-box">{{ shops.title }}</div>
  </RouterLink>  
</a-col>

params

与query传参不同的是，params传参在index.ts中的path需要提前占位，在to中就可以对path中占的位对号入座。

比如我在path中用x占位：

path:'/detail/:x?', //这里的冒号表示占位，问号表示这个地方可能有展位也可能没有（问号不加也可以）
component:Detail,

然后在template中：

<RouterLink to="/detail/aa">
	<div class="gutter-box">{{ shops.title }}</div>
</RouterLink>  

再在子组件中console.log(route)一下就可以发现：

最后用params接收：

{{ route.params.a }}

然后同样可以用变量传递的方式传参：

<a-col class="gutter-row" :span="6" v-for="shops in datashop" >
  <RouterLink 
  	:to="{
		name:'xiangqing'                  
    	query:{
         	a:shops.id,
        }
    }"
  >
    <div class="gutter-box">{{ shops.title }}</div>
  </RouterLink>  
</a-col>

但注意这里不能用path，只能用name来判断路径。

props配置

第一种写法

在路由配置中加上props:true，再在组件中加入defineProps([… , … ,])就可以将路由收到的params参数作为props传给组件。

子路由：

{
    name:'xiangqing',
    path:'/detail/:id/:title/:content',
    component:Detail,
	props:true
},

组件：

defineProps(['id','title','content'])

使用：

{{ id }}

第二种写法

也可以传递query参数：

{
    name:'xiangqing',
    path:'/detail/:id/:title/:content',
    component:Detail,
	props(route){
		return route.query
	}
},

总结

query不用占位，params需要占位。

本节使用RouterLink标签进行跳转，其中to属性解释来添加跳转的位置，可以用对象的方法书写。