vue3.x中路由模式 命名路由 路由重定向 路由别名

前面带大家了解了vue3.x路由的基本使用情况，下面主要带大家更深入的了解和掌握vue3.x中路由、路由模式、命名路由、路由重定向、路由别名等。

路由的模式

vue3.x与2.x一样支持两种路由模式，HTML5的History模式和hash模式

hsah模式
// 引入路由组件
import { createRouter,createWebHashHistory } from "vue-router";

// 引入组件
import Home from '../components/Home.vue'
import News from '../components/news.vue'
import User from '../components/user.vue'
import NewsDetails from '../components/newsDetails.vue'

// 配置路由
const router= createRouter({
  history: createWebHashHistory(), // 设置hash模式
  routes:[
    {path:'/',component:Home},
    {path:'/news',component:News},
    {path:'/user',component:User},
    {path:'/newsDetails/:id',component:NewsDetails},
  ],
})

// 暴露路由
export default router

http://localhost:8080/#/user

http://localhost:8080/#/home

上面大家看到的是路由的hash模式以及hash路由的展示形式，下面是HTML5 History模式，相比hash更为美观，但是不如hash兼容性好

HTML5 History模式
// 引入路由组件
import { createRouter,createWebHistory} from "vue-router";

// 引入组件
import Home from '../components/Home.vue'
import News from '../components/news.vue'
import User from '../components/user.vue'
import NewsDetails from '../components/newsDetails.vue'

// 配置路由
const router= createRouter({
  history: createWebHistory(), // 设置HTML5 History模式
  routes:[
    {path:'/',component:Home},
    {path:'/news',component:News},
    {path:'/user',component:User},
    {path:'/newsDetails/:id',component:NewsDetails},
  ],
})

// 暴露路由
export default router

http://localhost:8080/user

http://localhost:8080/home

需要注意的是在history模式下需要在服务器上配置一下代理模式，下面分别为大家写一下apache和nginx的配置方式

apache配置方法

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f  
  RewriteCond %{REQUEST_FILENAME} !-d  
  RewriteRule . /index.html [L]
</IfModule>

nginx的配置方法

server {    
// 域名
    server_name www.dearweb.cn;    // 项目入口文件目录地址 保证有权限
    root /www/project/blog/dist;

    index index.php index.html;    // 配置伪静态
    location / {
  	try_files $uri $uri/ /index.html;
    }
}

路由的命名

有时候，需要通过一个名称来标识一个路由显得更方便一点，特别是在链接一个路由，或者是执行一些跳转的时候，这时我们可以在创建router实例的时候，在router配置中给某个路由设置名称。

// 配置路由
const router= createRouter({
  history: createWebHashHistory(),
  routes:[
    {
       path:'/',
       name:'home', // 路由命名
       component:Home
    },
  ],
})

如果你要跳转到/home，可以直接按照下面的方式进行跳转，param里面为传值的内容

<router-link :to="{name:'user',params:{}}"></router-link>

js代码调用，编程式导航方式跳转
router.push({name:'user',params:{}})

路由的重定向

路由的重定向是在routes中配置完成的，要从重定向/a到/b

const routes=[{
    path:'/home',
    redirect:'/'
}]

当然重定向也可以针对命名路由：

const routes = [
  {
    path:'/home',
    redirect:{name:'user'}
  }
]

除了上述两种方式还有一种在工作中常见的方式，使用函数进行动态重定向

const routes = [
    {
        path:'/user/:id',
        redirect:to=>{
            return {path:'/user',query:{q:to.params.searchText}}
        }
    }
]

路由的别名

上面我们探讨了路由的重定向，下面我们一起来看下本文的最后一个内容，路由的别名，别名 /as/home 表示用户访问 /home，URL保持不变 /home，但将被匹配，就像用户正在访问时一样。这样讲大家也许听得不是很明白，我们看下代码。

const routes = [
 {
  path:'/',
  component:Home,
  alias:'/home'  // 配置别名
 }
]
域名下 如果访问 / 或者是 /home 都会去访问Home组件的内容

别名可以自由的讲UI结构映射到任意的URL，而不受配置的嵌套结构的约束，使别名a开头，/以是路径在嵌套路由中是绝对的，甚至可以减量中广核结合起来使用，并为数组提供多个别名：

const routes = [
    {
        path:'/user',
        component:User,
        children:[
        {
            path:'',component:UserList,alias:['/p','/u']
        }
        ]
    }
]

今天主要给大家带来了vue3.x路由的进阶知识，路由、路由模式、命名路由、路由重定向、路由别名等，it道路上，我们共同进步。