前端知识

vue路由

2018-12-23  本文已影响0人  2764906e4d3d

前端路由和后端路由:

路由的使用

  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}

            ]
        })
  1. router:routerObj将路由规则对象注册到VM实例上,用来监听URL地址的变化,然后展示对应的组件
var vm=new Vue({
                    el:'#div1',
                    data:{
                        
                    },
                    methods:{
                        
                        },
                    router:routerObj    
                    
                })
  1. 在控制的div中使用
 <router-view></router-view>
  1. 在搜索栏输入对应的匹配规则,login

  2. 使用vue官方提供的router-link元素使用,它默认渲染为一个a标签
<router-link to="/login">登录</router-link>
<router-link to="/register">注册</router-link>

路由重定向

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

路由传参

  1. 如果使用查询字符串 给路由传递参数则不需要修改路由规则的path属性
        <router-link to="/login?id=10">登录</router-link>
  1. 使用query传递参数
var login={
            template:'<h2>登录----{{$route.query.id}}</h2>'
        }
  1. 通过params方式传递路由参数,login后面会被解析为id的值
<router-link to="/login/12">登录</router-link>
{path:'/login/:id',component:login},
var login={
            template:'<h2>登录----{{$route.params.id}}</h2>'
        }

路由的嵌套

        <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>
var router=new VueRouter({
                routes:[
                    {path:'/account',component:account,
                    children:[
                        {path:'login',component:login},
                        {path:'register',component:register}
                    ]}
                ]
            })

命名视图

            <router-view></router-view>
            <router-view name="left"></router-view>
            <router-view name="main"></router-view>
var router=new VueRouter({
                routes:[
                    {path:'/',components:{
                        default:header,
                        left:leftBox,
                        main:mainBox
                    }},
                    
                ]
            })
上一篇 下一篇

猜你喜欢

热点阅读