vue.js window.router 新增路由 vue路由创建

动态路由：我们经常需要把某种模式匹配道德所有路由，全都映射到同一个组件。例如我们有一个user组件，对于所有id不同的用户又要使用这个组件来渲染。一个路径参数使用冒号标记

动态路由使用方法：

```js

const router =new VueRouter({

routes:[

{path:'/user/:id/:name/:age',component:user}

]

})

```

创建vue：

```js

//下载完vue-router后使用vue-router
import {createRouter, createWebHashHistory} from "vue-router";
import Foo from '../components/Foo.vue'
import Bar from '../components/Bar.vue'
import User from '../components/User.vue'

//创建路由信息对象数组
const routes=[
    {path:'/foo',component:Foo},
    {path:'/bar',component:Bar},
    {path:'/user',component:User},

]
//创建理由管理器对象
const router = createRouter({
    history: createWebHashHistory(),
    routes})



//将路由管理器对象对外抛出
export default  router;
//在main.js中将index与整个项目相关联
import router from './router/index.js'
createApp(App).use(router).mount('#app')

```

vue3合成api-----setup（）是vue3最重要的新特性之一

作用：之前vue对象规定了我们必须把某一类数据放到某一个结

构，这样在一定程度上对我们的代码进行了强制的分割。

在vue3中我们 入了setup0合成APl语法，他可以将某数据关联的

内容都整合到一个部分，即时setup0中的内容越来越多，也会围绕

着大而不乱的形式开发项目。

特点：1、setupQ结构中定义的变量，函数都需要 return 之后才可以在模板中使用

                 2.setup0是处于created生命周期之前的西数，也就是说data,methods中的数据是无法访问到的，setup（结构中的this指向undefinedref：在setup中只能包装字符串或数字形式的数据（值），使其变为响应式数据

reactive 在setup中包装对象，数组形式的数据（对象/数组）使其变成响应式数据toRefs 可以直接在html模板中使用对象的属性名当变量，不需要用，访问等。