diff --git "a/\346\254\247\351\230\263\347\276\216\346\235\217/note-06-15-21.md" "b/\346\254\247\351\230\263\347\276\216\346\235\217/note-06-15-21.md" new file mode 100644 index 0000000000000000000000000000000000000000..e8357bda3767be6676b10209394cdd8d94637766 --- /dev/null +++ "b/\346\254\247\351\230\263\347\276\216\346\235\217/note-06-15-21.md" @@ -0,0 +1,14 @@ +# 路由 + +``` +``标签 +Go to Foo + +``` + +``` +路由出口 +写在app.vue文件 + + +``` \ No newline at end of file diff --git "a/\346\254\247\351\230\263\347\276\216\346\235\217/note-06-16-21.md" "b/\346\254\247\351\230\263\347\276\216\346\235\217/note-06-16-21.md" new file mode 100644 index 0000000000000000000000000000000000000000..1c8576c441f7729761a0ea96ec32746613867e32 --- /dev/null +++ "b/\346\254\247\351\230\263\347\276\216\346\235\217/note-06-16-21.md" @@ -0,0 +1,125 @@ +# 动态路由匹配 + +``` +main.js里,会有动态路径参数,以冒号开头 + +import Vue from 'vue' +import App from './App.vue' +import VueRouter from "vue-router" + +import Profile from "./components/Profile" + +Vue.config.productionTip = false + +let router=new VueRouter({ + mode:"history", + routes:[ + { + //动态路径参数,以冒号为开头 + path:"/profile/id", + component:Profile + } + ] +}) + +Vue.use(VueRouter) + +new Vue({ + router, + render: h => h(App), +}).$mount('#app') + + +``` + +``` +捕获404 NOT found路由 + +path:"*"//会匹配所有路径 + +path:“/user-*”会匹配以`/user-`开头的任意路径 + +在main文件里 + +import Vue from 'vue' +import App from './App.vue' +import VueRouter from "vue-router" + +import Profile from "./components/Profile" +import P404 from "./components/404" + +Vue.config.productionTip = false + +let router=new VueRouter({ + mode:"history", + routes:[ + { + path:"*", + component:P404 + }, + { + path:"/profile/:uuname", + component:Profile + } + ] +}) + +Vue.use(VueRouter) + +new Vue({ + router, + render: h => h(App), +}).$mount('#app') + +新创建的404.vue文件 + + + +``` +``` +这里新创建的文件,Profile.vue + + + + + + + +``` \ No newline at end of file diff --git "a/\346\254\247\351\230\263\347\276\216\346\235\217/note-06-18-21.md" "b/\346\254\247\351\230\263\347\276\216\346\235\217/note-06-18-21.md" new file mode 100644 index 0000000000000000000000000000000000000000..4cd27a2840ae914dafe0982d4e978fde31f4ae38 --- /dev/null +++ "b/\346\254\247\351\230\263\347\276\216\346\235\217/note-06-18-21.md" @@ -0,0 +1,96 @@ +# 第十五节Vue课堂笔记 +## 编程式的导航 + +``` +在Vue实例内部,可以通过$router访问路由实例,可以调用this.$router.push + +声明式 + +编程式 router.push(...) + +在main.js文件里 +import Vue from 'vue' +import App from './App.vue' + +import VueRouter from "vue-router" + +import User from './components/User'; +import Login from './components/Login'; +import Register from './components/Register'; + +Vue.config.productionTip = false + +Vue.use(VueRouter) + +let router=new VueRouter({ + mode:"history", + routes:[ + { + path:"/user", + component:User + }, + { + path:"/login", + component:Login + }, + { + path:"/register", + component:Register + }, + + ] +}) + +new Vue({ + router, + render: h => h(App), +}).$mount('#app') + +app.vue里面 + + + + + + + + +``` \ No newline at end of file diff --git "a/\346\254\247\351\230\263\347\276\216\346\235\217/note-06-19-21.md" "b/\346\254\247\351\230\263\347\276\216\346\235\217/note-06-19-21.md" new file mode 100644 index 0000000000000000000000000000000000000000..21c572f8d1d13fdb91480e4fa0581fac91f8167c --- /dev/null +++ "b/\346\254\247\351\230\263\347\276\216\346\235\217/note-06-19-21.md" @@ -0,0 +1,254 @@ +# 路由 +## 命名路由 + +``` +例子main文件里 + +import Vue from 'vue' +import App from './App.vue' +import VueRouter from 'vue-router' +import User from "./components/User" + +Vue.config.productionTip = false + +Vue.use(VueRouter) + +let router = new VueRouter({ + mode:"history", + routes:[ + { + path:"/user/:id", //路径 + name:"user", + component:User + } + ] +}) + +new Vue({ + router, + render: h => h(App), +}).$mount('#app') + + +APP.vue文件里 + + + + + + + + +``` +# 命名视图 + +``` +例子 + +main里 + +import Vue from 'vue' +import App from './App.vue' +import VueRouter from 'vue-router' +import User from "./components/User" +import Login from "./components/Login" +import Profile from "./components/Profile" +import Registry from "./components/Registry" + + +Vue.config.productionTip = false + +Vue.use(VueRouter) + +let router = new VueRouter({ + mode:"history", + routes:[ + { + path:"/user", + name:"user", + components:{ + user:User, + login:Login, + registry:Registry, + profile:Profile + } + } + ] +}) + +new Vue({ + router, + render: h => h(App), +}).$mount('#app') + + +App.vue里 + + + + + + + + +``` + +# 嵌套命名视图 +## 未完成品 + +``` +例子,main文件下 + +import Vue from 'vue' +import App from './App.vue' +import VueRouter from 'vue-router' +import UserSetting from "./components/UserSetting" +import EmaliSetting from "./components/EmaliSetting" +import UserProfile from "./components/UserProfile" +import UserProfilePreview from "./components/UserProfilePreview" + + +Vue.config.productionTip = false + +Vue.use(VueRouter) + +let router = new VueRouter({ + mode:"history", + routes:[ + { + path:"/setting", + name:"user", + component:UserSetting, + children:[ + { + path:"emails", + component:EmaliSetting + }, + { + path:"profile", + components:{ + profile:UserProfile, + profilePreview:UserProfilePreview + } + }, + ] + } + ] +}) + +new Vue({ + router, + render: h => h(App), +}).$mount('#app') + + + + + + +App.vue + + + + + + + + + +UserSetting.vue里 + + + + + + +``` \ No newline at end of file