vue-router笔记

举报
技术火炬手 发表于 2019/02/20 11:16:55 2019/02/20
【摘要】 1、安装vue-cli脚手架a.下载安装node.js,随包同时也安装了npm;b.安装vue-cli:npm install vue-cli -g; //全局安装,只需要安装一次,以后新建其他的项目不用安装了c.vue init webpack demo //初始化项目,注意是vue init,而不是npm init(这个是创建package.json文件的) 先要进入我...

1、安装vue-cli脚手架

a.下载安装node.js,随包同时也安装了npm;
b.安装vue-cli:npm install vue-cli -g;  //全局安装,只需要安装一次,以后新建其他的项目不用安装了
c.vue init webpack demo  //初始化项目,注意是vue init,而不是npm init(这个是创建package.json文件的)
        先要进入我们项目的安装目录,然后执行下面的操作
d.nmp install  //安装项目依赖包,也就是安装package.json里的包
e.npm run dev  //开发模式下运行我们的程序。给我们自动构建了开发用的服务器环境和在浏览器中打开,并实时监视我们的代码更改,即时呈现给我们。
f.npm run build  //发布文件,项目根目录生成了dist文件夹,这个文件夹里边就是我们要传到服务器上的文件。

2、vue-router:SPA(单页应用)的路径管理器

☆☆ src/router/index.js,是路由的核心文件,这里面配置路由参数:
引入新增加的路由文件:import Hello from '@/components/Hi'配置路由名称Hi、路径`/Hi`和对应的组件模板

☆☆ 在src/components目录下,新建 Hi.vue 文件,文件包括三部分:<template><script>和<style>
以上配置完成之后,可以在url栏修改url即可实现页面的切换

一层路径(/xxx)对应一个router-view
比如url: /a/b/c (假设a、b、c都为正常路径,不会作为参数)
那/a对应的就是App.vue中的router-view,/a进入a.vue这个组件中
那/a/b对应的就是a.vue中的router-view, /a/b进入b.vue这个组件中

<router-view/>显示模板文件(xx.vue文件)里面的内容import Hi1 from '@/components/Hi1'{
    path:'/hi1',  //path值是自定义的,和app.vue里的router-link的to的值一样
    component:Hi1  //component的值就是import引入的组件名称,和组件名称名字一样
}3、router-link:制作导航栏
        写在src/App.vue文件中的template里        <router-link to="/">[显示字段]</router-link>,如:        <p>导航 :             <router-link to="/">首页</router-link>
             <router-link to="/hi">Hi页面</router-link>
        </p>

4、vue-router配置子路由
子路由的情况一般用在一个页面有他的基础模版,然后它下面的页面都隶属于这个模版,只是部分改变样式。
步骤和2相同,不同之处在于配置路由参数,在原有的路由配置下加入children字段
如:Hi1页面隶属于Hi页面

        {
            path:'/hi',
            component:Hi,
            children:[
                {path:'/',name: 'Hi',component:Hi},  
                {path:'hi1',name: 'Hi1',component:Hi1} 
                //path值可以自定义,不必和组件名一样,name值可以不写,component的值就是组件名称
            ]
        }

5、vue-router参数传递
a.使用to属性传递
使用router-link中的to属性进行传参,这时候的to必须使用绑定形式,即::to
☆☆router-link 定义点击后导航到哪个路径下 
<router-link :to="{name:'子路由的name值',params:{key:value}}"></router-link>
☆☆ name:就是我们在路由配置文件中起的name值。
☆☆ params:就是我们要传的参数,它也是对象形式,在对象里可以传递多个值。
☆☆ 接受参数值
在模板文件里面接收(路由文件模板),如src/compontnes/Hi1.vue用{{$route.params.key}} 
b.使用url进行参数传递 
在路由/src/router/index.js配置路由里面进行操作,以:冒号的形式传递参数
{
path:"/params/:newsId/:newsTitle",//表示需要传递的参数是什么
component:Params
}
在Params.vue组件(页面)里面输出,url传递的参数值
{{$route.params.newsId}}
{{$route.params.newsTitle}}
在App.vue文件里面,加上我们要传递过去的值
<router-link to="/params/198/i am newsTitle">params</router-link>

6、单页面多路由区域操作
<router-view/>显示模板文件(xx.vue文件)里面的内容,对应的组件内容渲染到router-view中
router-link 和router-view 标签一一对应,成对出现,router-view只出现在app.vue里面,components里面的组件都不需要加router-link 和router-view
配置使得一个页面里面有2个以上<router-view>区域
a。src/App.vue里面配置<router-view>,需要几个区域就写上几个<router-view>标签
<router-view name="right"></router-view> //name对应components里面的值
b。在router/index.js路由配置文件里面,引入对应的路由区域文件模板,如import Hi1 from '@/components/Hi1'
c。配置需要在components字段里进行(注意多个router-view就是components了,加个s)。如:

        {            path: '/Hi',
            components: {
                default:Hello,
                left:Hi2,
                right:Hi1
            }
        }

7、vue-router 的重定向-redirect

a.在src/App.vue里面新添加导航
                <router-link to="/goHome">goHome</router-link>
            b.在router/index.js路由配置文件里面,不需要引入路由模板了,因为是重定向
                {
                    path:'/goHome',  //表示要跳转到哪里
                    redirect:'/'  //重定向到首页,这里不需要component了
                }
            ***重定向的时候同时传递参数
            a.在src/App.vue里面新添加导航
                <router-link to="/goParams">goParams</router-link>  //这里面的goParams和路由里面的path值是一样的
            b.在router/index.js路由配置文件里面
                {
                    path:'/goParams/:id/:title',
                    redirect:'/params/:id/:title'  //跳转的路径
                }

8、alias别名:也可以实现类似重定向的效果

<router-link to="/xiao">xiao</router-link>  //这里面的xiao和路由里面的alias值是一样的
            {
                path:'/Hi1'  //需要重定向到的页面
                component:Hi1  //该页面对应的组件
                alias:'/xiao'  //自己取的别名
            }
            ☆☆redirect和alias的区别
                        redirect:仔细观察URL,redirect是直接改变了url的值,把url变成了重定向的页面的path路径。                        alias:URL路径没有改变,更友好,让用户知道自己访问的路径,只是改变了<router-view>中的内容。
            ☆☆填坑:别名alias请不要用在path为’/’中,如下代码的别名是不起作用的。
                    {
                        path: '/',
                        component: Hello,                        alias:'/home'
                    }
9、路由的过渡动画
            想让路由有过渡动画,需要在<router-view>标签的外部添加<transition>标签,标签还需要一个name属性。
            <transition>                <router-view name="fade" mode="out-in"></router-view>
            </transition>
            css过渡类名: 组件过渡过程中,会有四个CSS类名进行切换,这四个类名与transition的name属性有关,比如        ** name=”fade”**,会有如下四个CSS类名:
        **fade-enter**:进入过渡的开始状态,元素被 插入时生效,只应用一帧后立刻删除。
    **fade-enter-active**:进入过渡的结束状态,元素被 插入时就生效,在过渡过程完成后移除。
        **fade-leave**:离开过渡的开始状态,元素被删除时触发,只应用一帧后立刻删除。
        **fade-leave-active**:离开过渡的结束状态,元素被删除时生效,离开过渡完成后被删除。
        从上面四个类名可以看出,fade-enter-active和fade-leave-active在整个进入或离开过程中都有效,所以CSS的transition属性在这两个类下进行设置。
        **过渡模式mode**:
        **in-out**:新元素先进入过渡,完成之后当前元素过渡离开。
        **out-in**:当前元素先进行过渡离开,离开完成后新元素过渡进入。--------这种模式好

10、mode作用

此mode不是上面的过度动画里面的mode,在export default new Router({})里面设置                export default new Router({
                    mode:history',
                    routes:[
                        {
                        }
                    ]
                })
                mode的两个值
                histroy:当你使用 history 模式时,URL 就像正常的 url,例如 http://jsapng.com/lms/,也好看!不带#
                hash:默认’hash’值,但是hash看起来就像无意义的字符排列,不太好看也不符合我们一般的网址浏览习惯。

11、404页面设置
和设置子路由一样方式,只不过在path里面,值改为*

12、路由中的钩子
a.路由配置文件中的钩子函数
我们可以直接在路由配置文件(/src/router/index.js)中写钩子函数。但是在路由文件中我们只能写一个beforeEnter,就是在进入此路由配置时。
这是一个函数,有三个参数from对象、to对象、next()函数——一个开关,是否跳转到目标页面
from对象:路径跳转前的路径信息,也是一个对象的形式。表示是从哪个页面进入到本页面
to对象:路由将要跳转的路径信息,信息是包含在对像里边的。表示要进入的页面是哪个
next():路由的控制参数,常用的有next(true)和next(false)。一个开关,表示是否进行跳转到目标页面
next()一定要写上,否则就是没开开关,禁止跳转了
默认是next():可以跳转,加参数就是:
next(true):可以跳转
next(false):不可以跳转
b.写在模板中的钩子函数:有两个钩子函数可以使用
beforeRouteEnter:在路由进入前的钩子函数
beforeRouteLeave:在路由离开前的钩子函数
可以监控到路由的进入和路由的离开,也可以轻易的读出to和from的值。
beforeRouteEnter:(from,to,next)=>{
//do something
}
beforeRouteLeave:(from,to,next)=>{
//do something
}
13、编程式导航

不在html代码中使用router-link进行页面跳转,而是在js代码(业务逻辑)里面进行页面跳转
                        methods:{
                            goBack(){
                                this.$router.go(-1);
                            },
                            goForward(){
                                this.$router.go(1);
                            },
                            goHome(){
                                this.$router.push("/")
                            }
                        }

-----------------------------------------

本文转自xxxpjgl博客51CTO博客

如需转载,请联系作者授权

原文链接:http://blog.51cto.com/9161018/2318997

【版权声明】本文为华为云社区用户转载文章,如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。