vue路由
一、Vue3.x 中的路由
路由可以让应用程序根据用户输入的不同地址动态挂载不同的组件
npm install vue-router@next
二、路由的基本配置
1、安装路由模块
npm install vue-router@next
2、新建组件
3、配置路由
4、挂载路由
5、渲染组件
App.vue 中通过 router-view 渲染组件
三、动态路由
1、配置动态路由
const router = createRouter({
// 4. Provide the history implementation to use. We are using the hash history for simplicity here.
routes: [
{ path: '/home', component: Home },
{ path: '/news', component: News },
{ path: '/user', component: User },
// { path: '/newscontent/:aid', component: NewsContent },
{ path: '/newscontent', component: NewsContent }
]
// short for `routes: routes`
})
2、路由跳转
<li v-for="(item, index) in list" :key="index">
<router-link :to="`/newsContent/${index}`">{{itme}}</router-link>
</li>
3、获取路由
this.$route.params
四、Get 传值
<router-link to="/newsContent?id=2">Get传值<router-link>
this.$route.query
五、路由编程式导航(JS 跳转路由)
this.$router.push({path: 'news'})
this.$router.push({
path: '/newsContent/123'
})
六、路由 HTML5 History 模式和 hash 模式
6.1、 hash 模式
import {createRouter, createWebHashHistory} from 'vue-router'
const router = createRouter({
// 4. Provide the history implementation to use. We are using the hash history for simplicity here.
// history: createWebHashHistory(), //hash模式
history: createWebHashHistory(),
routes: [
{ path: '/home', component: Home },
{ path: '/news', component: News },
{ path: '/user', component: User },
// { path: '/newscontent/:aid', component: NewsContent },
{ path: '/newscontent', component: NewsContent }
]
// short for `routes: routes`
})
'http://localhost:8080/#/news'
如果把上面的路由改变成下面方式:
'http://localhost:8080/news'
我们就可以使用 HTML5 History 模式
6.2、HTML5 History 模式
import {createRouter, createWebHistory} from 'vue-router'
const router = createRouter({
history: createWebHistory(), //h5 History
routes: [
{ path: '/home', component: Home },
{ path: '/news', component: News },
{ path: '/user', component: User },
// { path: '/newscontent/:aid', component: NewsContent },
{ path: '/newscontent', component: NewsContent }
]
// short for `routes: routes`
})
- 注意: 开始 Html5 History 模式后,发布到服务器需要配置伪静态:
https://router.vuejs.org/zh/guide/essentials/history-mode.html
七、命名路由
有时候,通过一个名称来标识一个路由显得更方便一些,特别是在链接一个路由,或者是这行一些跳转的时候。你可以在创建 Router 实例的时候,在 routes 配置中给某个路由设置名称。
const router = new VueRouter({
routes: [
{
path: '/usr/:userId',
name: 'user',
component: User
}
]
})
要链接到一个命名路由,可以给 router-link 的 to 属性传一个对象:
<router-link :to="{name: 'user', params: {userId: 123}}">User</router-link>
这跟代码调用 router.push()是一回事:
router.push({name: 'user', params: {userId: 123}})
这两种方式都会把路由导航到/user/123 路径。
this.$router.push({name: 'content', query: {aid:222}})
八、路由重定向
重定向也在 routes 配置中完成,要从重定向/a 到/b
九、路由别名
重定向是指用户访问时/home,URL 将被替换/,然后与匹配/。但是什么事别名?
别名/as/home 表示用户访问时/home,URL 保持不变/home,但将被匹配,就像用户正在访问时一样/。
以上内容可以在路由匹配中表示为:
const routes = [{path: '/', component: Homepage, alias: '/home'}]
别名使你可以自由地将 UI 结构映射到任意 URL,而不受配置的嵌套结构的约束。使别名以 a 开头,/以使路径在嵌套路由中绝对的,你深圳可以将两者结合起来,并未数组提供多个别名
const routes = [{
path: '/users',
component: UsersLayout,
children: {
// this will render the UserList for these 3 URLs
// - /users
// - /users/list
// - /people
{path: '', compoent: UserList, alias: ['/pepole', 'list']}
}
}]
如果你的路线包含参数,请确保将其包含在任何绝对别名中
十、嵌套路由
配置 News 组件的子组件
1、新建 news/Add.vue
路由配置地址:
https://router.vuejs.org/zh/guide/essentials/redirect-and-alias.html#重定向
持续更新中......