• 【vue-router】Vue路由从创建到使用

    目录

    一、路由从创建到使用

    1、在html文件中使用路由

    第一步：使用CDN引入vue-router插件

    第二步：定义组件

    第三步：创建路由对象数组

    第四步：创建路由器实例对象

    第五步：将路由器对象注入到vue实例中

    第六步：使用路由

    2、vue-cli中使用路由 

    安装vue-cli

    创建一个项目

    路由的使用

    一、路由从创建到使用

    路由可以看成加载组件的另一种方式，使用路由来实现组件之间的跳转。

    vue-router是vue的一个插件，用来提供路由功能。通过路由的改变可以动态加载组件，达到开发单页面程序的目的。

    1、在html文件中使用路由

    第一步：使用CDN引入vue-router插件

    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue-router/3.5.4/vue-router.min.js" integrity="sha512-zxWuRslhjyZyRAYInXTNl4vC/vBBwLQuodFnPmvYAEvlv9XCCfi1R3KqBCsT6f9rk56OetG/7KS9dOfINL1KCQ==" crossorigin="anonymous" referrerpolicy="no-referrer">script>

    第二步：定义组件

    1. let aticle={
    2. 	template:`
    3. 		
      文章页面
    4. 	`
    5. };
    6. let column={
    7. 	template:`
    8. 		
      栏目页面
    9. 	`
    10. };
    '
    运行

    第三步：创建路由对象数组

    route路由对象  router路由器对象  routes路由对象数组

    1. let routes=[
    2.     {
    3.       path: '/',
    4.       // 路由重定向  设置刚进入页面时展示哪个页面
    5.       redirect: '/article'
    6.     },
    7. 	{
    8.       //路径
    9. 	  path:'/article',
    10.       //路由路径跳转的组件
    11. 	  component:aticle
    12.       // 路由命名
    13.       name:'Article',
    14.       // 路由别名
    15.       alias:'/aa'
    16. 	},
    17. 	{
    18. 	  path:'/column',
    19. 	  component:column
    20. 	}
    21. ];

    第四步：创建路由器实例对象

    创建路由器实例对象，将路由对象数组注入到路由器对象

    1. let router = new VueRouter({
    2. 	//routes: routes
    3.     //可以简写成：
    4.     routes
    5. });

    第五步：将路由器对象注入到vue实例中

    1. new Vue({
    2. 	router
    3. });

    第六步：使用路由

    to表示要去的路由

    1. <router-link to="/article">去文章管理router-link>
    2. <router-link to="/column">去栏目管理router-link>

    需要提供路由出口，匹配路由路径对应的组件

    <router-view>router-view>

    例子：

    1. html>
    2. <html lang="en">
    3.  
    4. <head>
    5.   <meta charset="UTF-8">
    6.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
    8.   <title>Documenttitle>
    9.   <script src="https://cdn.jsdelivr.net/npm/vue@2.7.10">script>
    10.   <script src="https://cdnjs.cloudflare.com/ajax/libs/vue-router/3.5.4/vue-router.min.js"
    11.     integrity="sha512-zxWuRslhjyZyRAYInXTNl4vC/vBBwLQuodFnPmvYAEvlv9XCCfi1R3KqBCsT6f9rk56OetG/7KS9dOfINL1KCQ=="
    12.     crossorigin="anonymous" referrerpolicy="no-referrer">script>
    13. head>
    14.  
    15. <body>
    16.   <div id="app">
    17.     
    18.     <router-link to="/article">去文章管理router-link>
    19.     <router-link to="/column">去栏目管理router-link>
    20.     
    21.     <router-view>router-view>
    22.   div>
    23.   <script>
    24.     let article = {
    25.       template: `
    26. 				
      文章页面
    27. 			`
    28.     };
    29.     let column = {
    30.       template: `
    31. 				
      栏目页面
    32. 			`
    33.     };
    34.     // 1.配置路由对象数组
    35.     let routes = [
    36.       {
    37.         path: '/',
    38.         // 路由重定向  设置刚进入页面时展示哪个页面
    39.         redirect: '/article'
    40.       },
    41.       {
    42.         path: '/article',
    43.         component: article
    44.       },
    45.       {
    46.         path: '/column',
    47.         component: column
    48.       }
    49.     ];
    50.     // 2.创建路由器对象router  
    51.     let router = new VueRouter({
    52.       routes
    53.     });
    54.     // 3.将路由器对象注入到vue实例中
    55.     new Vue({
    56.       router,
    57.       el: "#app",
    58.       data: {
    59.  
    60.       }
    61.     })
    62.   script>
    63. body>
    64.  
    65. html>

     

    2、vue-cli中使用路由 

    安装vue-cli

    npm install -g @vue/cli

    创建一个项目

    vue create 项目名称

    1、使用上下键选择最后一项（表示手动选择功能），然后回车：

     

    2、 按空格键可以选中或取消选中，我们选择以下两项：

    3、选择vue2版本

     

    4、路由器是否使用历史模式？输入y或者直接回车即可

     

    5、想要把配置项放在哪里？选择In package.json

     6、是否保存为未来项目的预设？直接回车即可

    7、等待项目创建。。。

     

    8、启动项目

     

    路由的使用

    路由相关的配置在 src-->router-->index.js，我们可以在components或者views下面写我们的组件，或者也可以自己创建一个文件夹来存放组件。

     

     在vue-cli中的路由使用和在html文件中的使用步骤是一致的：

    例子：
    在components下创建两个组件：A.vue 和 B.vue

    A.vue

    2. <script>
    3. export default {
    4.   data(){
    5.     return{
    6.       msg:"我是A组件"
    7.     }
    8.   }
    9. }
    10. script>

    B.vue

    2. <script>
    3. export default {
    4.   data(){
    5.     return{
    6.       msg:"我是B组件"
    7.     }
    8.   }
    9. }
    10. script>

     然后我们去router下的index.js配置路由：

    最后我们在App.vue中使用路由：

     

     

    观察地址栏，当我们点击页面跳转时，只有后面的地址发生改变了，而前面的localhost:8080没有变化，这就是单页面应用。

     

     

     

     

  • 相关阅读:
    你的隐私全暴露了！iPhone小白最容易忽略的3个设置
    关于GB 2312 编码顺序的研究
    C# 操作国产数据库【 人大金仓 】之四大模式
    Openlayers 中加载渲染 WMTS TMS XYZ WMS WFS 图层
    java版鸿鹄工程项目管理系统 Spring Cloud+Spring Boot+前后端分离构建工程项目管理系统源代码
    XSS进阶一
    互联网Java工程师面试题·Java 并发编程篇·第七弹
    python使用matplotlib可视化线图（line plot）、将可视化图像的图例（legend）放置在图像外部、左侧区域
    网课答案公众号搭建！小白教程！内附网课题库接口！
    Linux C语言开发(续)
  • 原文地址：https://blog.csdn.net/lq313131/article/details/127110656