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#重定向

持续更新中......