wordpress多站点好用吗,移动开发专业,网龙网络公司排名,自己办网站vue路由的基本使用 vue-router简介一、路由配置和使用1、安装2、创建路由实例2、在组件中引用路由 router-view ,如APP根组件中直接引用#xff1a;3、最后还需要把路由挂载到APP实例中#xff0c;在main.js中注册路由#xff1a; 二、路由重定向与别名三、声明式导航1、传统… vue路由的基本使用 vue-router简介一、路由配置和使用1、安装2、创建路由实例2、在组件中引用路由 router-view ,如APP根组件中直接引用3、最后还需要把路由挂载到APP实例中在main.js中注册路由 二、路由重定向与别名三、声明式导航1、传统的导航2、通过路由router-link 四、嵌套路由四、命名路由五、取消路由组件在前进后退命名路由二、嵌套多级路由二级目录三级目录 vue-router简介
Vue Router 是 Vue.js 的官方路由。它与 Vue.js 核心深度集成让用 Vue.js 构建单页应用变得轻而易举。功能包括
嵌套路由映射动态路由选择模块化、基于组件的路由配置路由参数、查询、通配符展示由 Vue.js 的过渡系统提供的过渡效果细致的导航控制自动激活 CSS 类的链接HTML5 history 模式或 hash 模式可定制的滚动行为URL 的正确编码
一、路由配置和使用
1、安装
打开项目终端通过npm安装
npm install vue-router42、创建路由实例
在项目中src目录想创建Router文件夹新建index.js文件在这个文件下配置路由
import { createWebHashHistory, createRouter } from vue-routerimport Center from ../view/Center.vue //引入组件路径路由组件尽量放在view文件夹下
import Home from ../view/Home.vueconst routes [{ path: /Center, //跳转的路径name:Center //命名路由也可以不写component: Center //跳转到对应的组件
},{ path: /Home, component: Home
},
]const router createRouter({history: createWebHashHistory(),//hash的模式如#/home#/center 带#号的路径routes,//routes:routes的缩写
})export default router2、在组件中引用路由 router-view ,如APP根组件中直接引用
templateapp!--插槽--router-view/router-view/template
3、最后还需要把路由挂载到APP实例中在main.js中注册路由 import { createApp } from vue
import App from ./App.vue
import router from ./Router //直接导入Router文件夹会自动找到index.js这个文件const appcreateApp(App)app.use(router) //注册路由插件
app.mount(#app)
直接输入对应的路径显示对应的组件到此路由的基本模型已经做好了 二、路由重定向与别名
重定向也是通过 routes 配置redirect来完成下面例子是从 /home 重定向到 /
const routes [{ path: /home, redirect: / }
]重定向的目标也可以是一个命名的路由路由通过name来命名
const routes [{ path: /home, redirect: { name: center } }]常规参数只匹配url片段之间的字符用 / 分割。如果我们想匹配任意路径我们可以自定义的路径参数正则表达式在路径参数后面的括号中加入 正则表达式
const routes [{ path: /:pathMatch(.*)*, //pathMatch只是占位符任意字母都可以name:NotFound,component: NotFound},
]别名用alias属性表示当url匹配到别名/abc也会跳转到组件center中去
const routes [{ path: /Center, component: Center ,alias:/abc //注意别名有个/也可以用数组alias: [/abc, aaa]},
]三、声明式导航
1、传统的导航
通过a标签跳转
div classtabbarullia href#/home首页/a/lilia href#/films影院/a/lilia href#/center我的/a/li/ul/div2、通过路由router-link
to跳转到对应的路由不需要加#号不过标签会带a标签的样式底部会有个下划线不太好看后面我们也可以通过$route.push跳转的方法 ullirouter-link to/home首页/router-link /lilirouter-link to/films影院/router-link /lilirouter-link to/center我的/router-link/li
/ul通过active-classkerwin来命名使选中的显示高亮
templatediv classtabbarullirouter-link to/home active-classkerwin首页/router-link/lilirouter-link to/films active-classkerwin影院/router-link /lilirouter-link to/center active-classkerwin我的/router-link/li/ul/div/template
script setup/script
style scoped
.kerwin{color: red;
}
.tabbar{position: fixed;width: 100%;height: 50px;line-height: 50px;text-align: center;bottom: 10px;
}
.tabbar ul{display: flex;}.tabbar ul li{flex:1;
}/style如图所示
四、嵌套路由
一个路由组件下面再嵌套路由要将组件渲染到这个嵌套的 router-view 中我们需要在路由中配置 children
const routes [{path: /user,component: User,children: [{// 当 /user/profile 匹配成功// UserProfile 将被渲染到 User 的 router-view 内部path: profile,// path: /user/profile的简写通过http://localhost:5173/#/user/profile访问component: UserProfile,},{// 当 /posts 匹配成功// UserPosts 将被渲染到 User 的 router-view 内部path: /posts, //注可以通过http://localhost:5173/#/posts访问component: UserPosts,},],},
]注意以 / 开头的嵌套路径将被视为根路径。这允许你利用组件嵌套而不必使用嵌套的 URL。四、命名路由
五、取消路由组件在前进后退
命名路由
二、嵌套多级路由
二级目录
三级目录
