有名的wordpress网站,网页制作设计框架,广州专门做网站,苏州网站建设哪家好一、路由的基本搭建
1、安装
npm install vue-router --registryhttps://registry.npmmirror.com 2、配置路由模块
第一步#xff1a;src/router/index.js创建文件
第二步#xff1a;在src/view下面创建两个vue文件#xff0c;一个叫Home.vue和About.vue
第三步#x…一、路由的基本搭建
1、安装
npm install vue-router --registryhttps://registry.npmmirror.com 2、配置路由模块
第一步src/router/index.js创建文件
第二步在src/view下面创建两个vue文件一个叫Home.vue和About.vue
第三步配置src/router/index.js文件 import Home from ../view/Home.vue
import About from ../view/About.vue
import { createRouter, createWebHistory } from vue-routerconst routes [{path: /,component: Home},{path: /about,component: About}å
]const router createRouter({history: createWebHistory(),routes
})export default routes 3、main引入 import { createApp } from vue
import ./style.css
import App from ./App.vue
import router from ./router/indexcreateApp(App).use(router).mount(#app)4、使用路由
在App.vue文件中使用 templatedivrouter-view/router-view/div
/template 5、页面按钮切换路由一级路由
路由组件router-link to//router-link templatedivrouter-link to/首页/router-link|router-link to/aboutabout/router-linkrouter-view/router-view/div
/templatescript setup
/scriptstyle scoped
/style 6、页面按钮切换路由二级路由 第一步新建两个页面一个Foo.vue和Bar.vue
第二步src/router/index.js文件里引入且配置 import Home from ../view/Home.vue
import About from ../view/About.vue
import Bar from ../view/Bar.vue
import Foo from ../view/Foo.vue
import { createRouter, createWebHistory } from vue-routerconst routes [{path: /,component: Home},{path: /about,component: About,children: [{path: foo,component: Foo,},{path: bar,component: Bar,}]}
]const router createRouter({history: createWebHistory(),routes
})export default router第三步在About.vue文件中配置二级路由和跳转 templatedivAboutViewıdivrouter-link to/about/foofoo/router-link|router-link to/about/barbar/router-link/divrouter-view/router-view/div
/templatescriptexport default {name: AboutView}
/scriptstyle scoped/style 二、动态路由模式 1、第一步将foo的path改成/:id 2、第二步修改about.vue跳转路由 3、第三步可以在foo.vue文件内拿到动态路由传递过来的值
$route.params.id 三、编程路由模式
1、路由跳转代码this.$router.push(地址) 四、命名路由
注意除了path外还可以为任何路由提供name
优点
1、没有硬编码的URL
2、params的自动编码/解码
3、防止在url中出现打字错误
1、在router.js中给路由添加name属性 2、将router-link的to写成动态传值模式 五、命名视图
有时候想同时同级展示多个视图而不是嵌套展示 六、路由原信息
注意有时可能希望将任何信息附加到路由上如过度名称、谁可以访问路由等。这些事情可以通过接受属性对象的meta属性来实现。 如何拿到meta内的值 七、路由传参
1、query方式显示
一、通过连接方式传递 结果 二、通过name方式传递 2、params方式显示动态路由 3、params方式隐式
注意点击刷新时传递数据会消失 八、route对象和router对象 1、 route对象 注意route是进行获取操作对当前路由进行操作
2、router对象 注意route是进行设置操作 对所有路由进行方法的集合 九、路由守卫
注意提供的导航守卫主要用来通过跳转或取消的方式守卫导航守卫主要有全局的单个路由独享的或者组件级的。
to跳转到哪一个url
form从哪一个url来的
next决定进入到文件内还是跳转到其他组件
1、全局路由守卫 2、单个路由独享守卫 3、 组件级守卫
