diff --git "a/\346\275\230\351\207\221\351\223\216/2021-6-16.md" "b/\346\275\230\351\207\221\351\223\216/2021-6-16.md" new file mode 100644 index 0000000000000000000000000000000000000000..058db5a53deb9ac905be50257e870ee211e0c47c --- /dev/null +++ "b/\346\275\230\351\207\221\351\223\216/2021-6-16.md" @@ -0,0 +1,56 @@ +# 路由 +## 安装依赖 +先安装router依赖 +``` +yarn add vue-router +``` +引入router依赖 +``` +import VueRouter from 'vue-router' +``` +使用router依赖 +``` +vue.use('VueRouter') +``` +## 使用路由 +引入路由文件 +``` +import Test from './components/Test' +``` +初始化VueRouter,声明所需路由 +``` +let router=new VueRouter({ + mode:'history', + routes:[ + { + path:'/Test', + component:Test, + } + ] +} +``` +接着在new vue 中使用router即可,router为缩写,完整的应该是router:routes + +在app.vue中写下 `` 即可使用路由文件 + +在path后写下 `/:id` 后可以在路由文件中通过 `{{$route.params.id}}` 获取地址栏中的数据 + +# 镶嵌路由 +在初始化路由时在加入一个键值对 `children` ,其余操作可路由一样,作用在与可以在原路由基础上再添加一个路由 +``` +let router=new VueRouter({ + mode:'history', + routes:[ + { + path:'/Test/:id', + component:Test, + children:[ + { + path:'p404', + component:p404 + } + ] + } + ] +}) +``` \ No newline at end of file