Vue路由(vue-router)

1.Vue路由(vue-router)介绍

Vue Router 是 Vue.js(opens new window) 官方的路由管理器。它和 Vue.js 的核心深度集成,让构建单页面应用变得易如反掌。包含的功能有:

  • 嵌套的路由/视图表
  • 模块化的、基于组件的路由配置
  • 路由参数、查询、通配符
  • 基于 Vue.js 过渡系统的视图过渡效果
  • 细粒度的导航控制
  • 带有自动激活的 CSS class 的链接
  • HTML5 历史模式或 hash 模式,在 IE9 中自动降级
  • 自定义的滚动条行为

前端路由和后端路由:

  • 后端路由:对于普通的网站,所有的超链接都是url地址,所有url都对应服务器上对应的资源。
  • 前端路由:对于单页面应用程序来说,主要通过url的hash(#)来实现不同页面的切换,同时hash还有一个特点HTTP请求中不会包含hash相关的内容,所以单页面程序中的页面跳转主要用hash实现在单页面应用程序中这种通过hash来改变页面的方式称作前端路由区别于后端路由。 

文档地址:

https://router.vuejs.org/zh/

2.路由的使用

  1. 创建一个路由对象,当导入vue-router包之后,在window全局对象中就有一个路由的构造函数VueRouter
  2. 在new路由对象的时候可以传递一个配置对象,这个配置对象的route表示路由器的匹配规则
  3. 每个路由规则都是一个对象,这个规则对象身上必须有两个属性
    • 属性1 path表示监听哪个路由链接地址
    • 属性2 component,表示如果路由是前面匹配到的path,则展示component属性对应的组件,component属性值必须是一个组件模板对象,不能是组件的引用名称
var login={
            template:‘<h2>登录</h2>‘
        }
        var register={
            template:‘<h2>注册</h2>‘
        }
        var routerObj=new VueRouter({
            routes:[
                {path:‘/login‘,component:login},
                {path:‘/register‘,component:register}

            ]
        })

    4. router:routerObj将路由规则对象注册到VM实例上,用来监听URL地址的变化,然后展示对应的组件

var vm=new Vue({
                    el:‘#div1‘,
                    data:{
                        
                    },
                    methods:{
                        
                        },
                    router:routerObj    
                    
                })

    5. 在控制的div中使用

<router-view></router-view>

3.路由重定向

  1. 设置一个默认展示组件,不推荐
{path:‘/‘,component:login},
  1. 路由redirect重定向,设置默认组件
{path:‘/‘,redirect:‘login‘},

4.路由的嵌套

  • 使用children属性实现路由嵌套,子路由path前不要加/,否则永远以根路径开始请求
  //HTML代码
  <div id="div1" <router-link to="/account">account</router-link> <router-view></router-view> </div> <template id="tmp1"> <div> <h2>account 组件</h2> <router-link to="/account/login">登录</router-link> <router-link to="/account/register">注册</router-link> <router-view></router-view> </div> </template>
 //js代码 var router=new VueRouter({ routes:[ {path:‘/account‘,component:account, children:[ {path:‘login‘,component:login}, {path:‘register‘,component:register} ]} ] })

5.命名视图

  • 命名视图在components(这时会多个s)后加属性再在使用<router-view></router-view>的时候用name引入,可以使一个页面中存在多个路由
 
HTML代码
<router-view></router-view>
            <router-view name="left"></router-view>
            <router-view name="main"></router-view>
//js代码
var router=new VueRouter({
                routes:[
                    {path:‘/‘,components:{
                        default:header,
                        left:leftBox,
                        main:mainBox
                    }},
                    
                ]
            })

 

 

以上内容为个人学习总结,欢迎批评指正~~~

Vue路由(vue-router)

上一篇:Redis--哨兵模式


下一篇:自定义数据校验的步骤