Vue详解＜三＞?

最新推荐文章于 2024-07-25 08:17:38 发布

浅浅一笑^*^

最新推荐文章于 2024-07-25 08:17:38 发布

阅读量364

点赞数

分类专栏： vue的路由 vue路由传参 webpack下载vue项目文章标签： vue js

本文链接：https://blog.csdn.net/weixin_46409887/article/details/109282387

版权

vue路由传参同时被 3 个专栏收录

3 篇文章 0 订阅

订阅专栏

vue的路由

2 篇文章 0 订阅

订阅专栏

webpack下载vue项目

1 篇文章 0 订阅

订阅专栏

1.vue的生命周期?
beforeCreate->created->beforeMount->mouted->beforeUpdate->updated->
beforeDestory->destoyed
共八个生命周期:
初始前->初始后->载入前->载入后->更新前->更新后->销毁前->销毁后

2.路由?
访问不同的路径，就可以返回不同的结果,可以做到跳转页面却不需要刷新页面，整体来说是跳转组件用的。
传统的路由方式：

1.hash模式:#
2.h5的history.pushState
  history.pushState(null,null,'downLoad.html?id=1');
  路由也是基于这两种方式，但是用法统一，它是自己判断用那种方式

 可以开发单页面（SPA）应用SPA（slgnle page application）单页应用程序
 不利于seo优化(实际就是排名前后)，hash模式搜寻找不到#号后面的值(称为哈希值)

下载方法 npm install vue-router
引入:vue-router.js 必须在vue.js之后
使用:1.新new一个VueRouter，可以拿一个变量（const  name=接收路由实例）
     2.配置路由映射表
     3.在vue实例中注册路由，把new的路由实例给vue实例
     4.在页面显示和跳转路由
     <router-view>显示组件的
     <router-link to='./组件路径'>跳转组件
     <router-link tag='标签名'>默认渲染成a标签 ，使用tag=标签名，改变要渲染的标签
     默认选中的样式：router-link-exact-active(确切的激活)
                    router-link-active（激活时）
     更该选中的样式名：linkActiveClass：'active'

一级路由：如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>主干道路由</title>
    <script src='../vue/dist/vue.js'></script>
    <script src="./dist/vue-router.js"></script>
    <style>
        .box{
            color:red
        }
    </style>
</head>
<body>
    <div id='app'>
    <!-- 跳转 -->
    <router-link to='/home'>首页</router-link>
    <router-link to='/list'>列表</router-link>
    <router-link to='/*' tag='button'>返回</router-link>

    <!-- 视图显示 -->
     <router-view></router-view>
    </div>
    <script>
        //router-link自动渲染a标签，如果要改变用tag=标签名
        //创建渲染页面内容
        let home={template:"<div>home</div>"}
        let list={template:"<div>list</div>"}
        //1.新new一个vueRouter，可以用一个变量接收一下路由实例
        let myrouter=new VueRouter({//固定的方法
        //2.配置路由映射表，routers:[]是个数组
         routes:[//一级路由必须加/
             {path:'',component:home},//默认页面
             {path:'/home',component:home},//当前
             {path:'/list',component:list},//当前
             {path:'/*',component:home}//通用页面
         ],
         //改成想要的class名
         linkActiveClass:'box'
         
        })
       
        //根实例app
        let vm=new Vue({//根实例
            el:'#app',
            components:{//注册
                home,list
            },
            //3.把创建好的路由挂载到vue的实例上
            router:myrouter
        })
    </script>
</body>
</html>

二级路由：如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>二级路由</title> 
    <script src="../vue/dist/vue.js"></script>
    <script src="./dist/vue-router.js"></script>
    <style>
     #di-shi{
         width: 100%;
         height: 100%;
         text-align: center;
     }
     .box1{
         color:blue;
     }
    </style>
</head>
<body>
   <div id='di-shi'>
       <!-- 跳转 -->
       <router-link to='/home'>home</router-link>
       <router-link to='/list'>list</router-link>
       <!-- 视图显示 -->
       <router-view></router-view>
    </div> 
    <!-- templat 只能配置id 不能选用class会报错 -->
    <template id='list'>
        <div>
            <!--子路由 在list里面使用  -->
            <router-link to="/list/todt">详情</router-link>
            <router-link to="/list/tolt">添加</router-link>
           <!-- 视图 -->
            <router-view></router-view>

        </div>
    </template>
   <script>
       let home={
           template:'<div>home</div>'
       }
       let list={template:'#list', }
       let todt={
           template:'<div>去at</div>'
       }
       let tolt={
           template:'<div>去lt</div>'
       }
       //new一个实例
       let newrouter=new VueRouter({
           //配置路由映射表
           routes:[//以数组形式
           {path:'',component:home},//默认页面
           {path:'/home',component:home},
           {path:'/list',component:list,
            //以下嵌套子路径//二级路由不用带/
            children:[//数组//在哪定义就在那里使用子路由
               {path:'',component:todt},//定义默认路径
               {path:'todt',component:todt},
               {path:'tolt',component:tolt}
           ]

        },
           {path:'/*',component:home}//*通用的任意页面
           
        ],
           //改变class
           linkActiveClass:'box1'
       })
       let vm=new Vue({
           el:'#di-shi',
           components:{//注册路由
               home,list
           },
           router:newrouter//路由挂载在实例上

       })
   </script>
</body>
</html>

路由传参:如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>传参页面</title>
    <script src="../vue/dist/vue.js"></script>
    <script src="./dist/vue-router.js"></script>
</head>
<body>
    <div id='app'>
<!-- 跳转 动态获取路由参数-->
<!---{name:'跟映射表的name名一致' --->
<!-- params:{传递的多个参数} -->
<!-- params和name:{}名字是固定的不能改变 -->
<!-- {对象里面内容可以改变} -->
<!-- 2.to=/home/参数名 可以配置多个参数名-->
<router-link :to="{name:'pro',params:{c:1,b:2}}">home1</router-link>
<router-link to="/home/2/3">home2</router-link>
<!-- 视图显示 -->
<router-view></router-view>
   
</div>
    <script>
        //创建页面渲染的内容 可以传参
        let home={//3.使用this.$route.params.xxx获取路由传进来的参数，可以简写成$rout.params.xxx
            template:'<div>第{{$route.params.c}}篇文章{{this.$route.params.b}}</div>',
             //监听值
            wath:{
                //路由的变化
                $route(n,l){
                    console.log(n);//可以看到旧值和新值

                    console.log('ajax');//当我点击按钮的时候可以监听到路由的变化
                }
            }
        }

        //1.new一个实例
        let myrouter=new VueRouter({
            //2.配置路由映射表
            routes:[
                //1.要传递的参数名：在路径后面加/:xxx
                {path:'/home/:c/:b',component:home,name:'pro'}
        ]
        })
        //根实例
        let vm=new Vue({
            el:'#app',
            components:{//根实例里面注册路由
                home
            },
            router:myrouter//3.路由挂载在实例上
        })
    </script>
</body>
</html>

vue脚手架:vue-cli
作用:生成一个vue的项目
1.全局下载vue-cli 脚手架 sudo npm install vue-cli -g
2.生成一个vue项目：vue init webpack domename

目录:
node-modules:当前项目所有已经安装的插件（依赖包）
src:组件,入口文件
scatic:静态资源
index.html:入口页面
pack.json:安装的依赖清单

1.bulid:主要是用来配置构建项目以及webpack
2.config：项目开发配置
3.node-modules:npm或cnpm或者yarm所下载的依赖包
4.src：组件，入口文件，你开发的源代码