Vue----路由（上）

一、什么是路由？

对于单页面应用程序来说，组件与组件之间的跳转规则就是路由；     

Vue 路由允许我们通过不同的 URL 访问不同的内容(组件)。     

通过 Vue 可以实现多视图的单页 Web 应用（single page web application，SPA）。

---

提示：以下是本篇文章正文内容，下面案例可供参考

二、基本案例

HTML：<router-link>是一个组件，该组件用于设置一个导航链接，切换不同的HTML。to属性为目标地址，即要显示的内容。

<!--router-link 将呈现为一个带有正确href属性的a标签 -->
<router-link to="/">首页</router-link>
<router-link to="/about">关于我们</router-link>
<hr>
<!--router-view路由出口--><!--路由匹配到的组件将渲染在这里-->
<router-view></router-view>

router-link :可以使得Ve Router在不重新加载页面的情况下更改URL，处理URL的生成及编码。

router-view: router-view将显示与url对应的组件。可以放在任何地方，以适应你的布局。

JavaScript：

//1.定义两个组件,也可以是通过import导入的组件
const Home ={template:<div class='home'></div>`}
const About ={template:<div class='about'></div>'}

//2.定义路由映射(此选项将作为路由实例的配置)
//每个路由都需要映射到一个组件
const routes =[{path:'/',component:Home},
    {path:'/about',component:'my-about'},
];
//3.创建路由实例，并传递routs配置
const router =VueRouter.createRouter({
//内部提供了 history 模式的实现。为了简单起见，我们在这里使用hash 式。history:VueRouter.createWebHashHistory(),
routes，//routes:routes、的缩写
})
//创建实例
const vm=Vue.createApp({})
//设置整个实例支持路由
vm.use(router);
//挂载实例
vm.mount('#app1');

三、router-link属性补充

1，to 属性：

通过to属性可以规定路由跳转地址：

<router-link to='/'>首页</router-link>

to属性也可以写成绑定属性，那么他所绑定的值就会变成一个对象：

<router-link :to"{path:'/'}">首页</router-link>

2, replace属性：

设置replace属性的话，当点击是，会调用router.replace()而不是router.push(),导航后不会留下history记录。

四，嵌套路由

1.使用命名路由的方式

第一步：制作父页面导航；

第二步：定义父组件

第三步：定义路由规则

2，不使用命名路由的方式

第一步：制作父页面导航；

第二步：定义父组件

第三步：定义路由规则

五，编程式导航

$router.push()方法的参数：

<router-link>提供了replace属性，编程式导航也提供了此功能

路由中的前进后退功能（history.go(n)）：

六，命视图

在<router-view>上使用name属性规定视图名称，如果 router-view 没有设置名字，那么默认为 default，一个视图使用一个组件渲染，因此对于同个路由，多个视图就需要多个组件。确保正确使用 components 配置 (带上 s)    

七，重定向

之前的方式：

可以替换成：

通过组件的props属性，可以接收路由传递过来的参数     当 props 设置为 true 时，route.params 将被设置为组件的 props。

八，不同的历史模式        

1.Hash 模式     

它在内部传递的实际 URL 之前使用了一个哈希字符（#）。由于这部分 URL 从未被发送到服务器，所以它不需要在服务器层面上进行任何特殊处理。不过，它在 SEO 中确实有不好的影响。如果你担心这个问题，可以使用 HTML5 模式。     

2.HTML5 历史模式(推荐)   

 用 createWebHistory() 创建 HTML5 历史模式;     当使用这种历史模式时，URL 会看起来很 "正常"，例如 https://example.com/user/id         

不过，问题来了。由于我们的应用是一个单页的客户端应用，如果没有适当的服务器配置，用户在浏览器中直接访问 https://example.com/user/id，就会得到一个 404 错误。     

要解决这个问题，你需要做的就是在你的服务器上添加一个简单的回退路由。如果 URL 不匹配任何静态资源，它应提供与你的应用程序中的 index.html 相同的页面。

OK，本文到此结束，希望本文对你有所帮助 😃

如果还有什么疑问或者建议，可以多多交流，原创文章，文笔有限，才疏学浅，文中若有不正之处，万望告知。