zoukankan      html  css  js  c++  java
  • vue 路由

    vue 路由

    其实vue的路由非常简单,只要有一点Angular和React基础的,一看就明白了,vue就是结合Angular和React的有点进行改造出来的,里面很多语法都和Angular很类似,建议在学习Vue之前先熟悉一下Angular,这样学习起来会比较轻松,和React,Angular对比起来学习,更容易学会。
    Vue的中文API网址:http://router.vuejs.org/zh-cn/,如果想学习更多的内容就上官网吧,这篇博客我自是简单写了一个Vue的路由。
    第一步、引入vue-router
    第二步、编写路由--html
    <p>
    <!-- 使用 router-link 组件来导航. -->
    <!-- 通过传入 `to` 属性指定链接. -->
    <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
    <router-link to="/foo">Go to Foo</router-link>
    <router-link to="/bar">Go to Bar</router-link>
    </p>
    <!-- 路由出口 -->
    <!-- 路由匹配到的组件将渲染在这里 -->
    <router-view></router-view>
    第三步、配置路由--js
    // 0. 如果使用模块化机制编程,導入Vue和VueRouter,要调用 Vue.use(VueRouter)
    // 1. 定义(路由)组件。
    // 可以从其他文件 import 进来
    const Foo = { template: '<div>foo</div>' }
    const Bar = { template: '<div>bar</div>' }

    2. 定义路由
    // 每个路由应该映射一个组件。 其中"component" 可以是
    // 通过 Vue.extend() 创建的组件构造器,
    // 或者,只是一个组件配置对象。
    // 我们晚点再讨论嵌套路由。

    const routes = [
    { path: '/foo', component: Foo },
    { path: '/bar', component: Bar },
    { path: '*', redirect: '/news' } /*路由的重定向*/
    ]

    // 3. 创建 router 实例,然后传 `routes` 配置
    // 你还可以传别的配置参数, 不过先这么简单着吧。
    const router = new VueRouter({
    routes // (缩写)相当于 routes: routes
    })
    // 4. 创建和挂载根实例。
    // 记得要通过 router 配置参数注入路由,
    // 从而让整个应用都有路由功能

    const app = new Vue({
    router
    }).$mount('#app')
    或者
    var app=new Vue({
    router:router,
    el:'#app'
    })
    // 现在,应用已经启动了!

    路由传参
    场景:模拟首页、新闻页(包含新闻列表,点击实现跳转到详情页,然后可以点击返回到列表页)
    传参思想与angular类似
    第一步、定义基本路由

    <router-link to="/home">去首页</router-link>
    <router-link to="/news">去新闻</router-link>
    <router-view></router-view>

    第二步、创建新闻列表页面----在路由之后添加参数即可

    <template id="news">
    <div>
    <div>这是一个新闻的页面---新闻列表页面</div>
    <router-link to="/newscontent/123">去新闻详情111</router-link>
    <router-link to="/newscontent/456">去新闻详情456</router-link>
    </div>
    </template>
    <template id="newscontent">
    <div>
    <div>这是一个新闻的详情页面---{{$route.params.aid}}</div>
    <router-link to="/news">返回</router-link>
    </div>
    </template>

    第三步、定义HOME组件、新闻组件,详情组件

    var Home={
    template:'<div>这是一个首页的页面</div>'
    }
    var News={
    template:'#news'
    }
    var NewsContent={
    template:'#newscontent',
    mounted:function(){
    
    console.log(this.$route.params.aid);
    }
    }

    第四步、配置路由

    var rotues = [
    {path:"/home",component:Home},
    {path:"/news",component:News},
    {path:"/newscontent/:aid",component:NewsContnet},
    {path:"*",redirect:"/news"}
    ]

    第五步、实例化vueRouter

    var router = new VueRouter({
    routes:routes
    })

    第六步、将vueRouter挂载到Vue实例上

    var app = new Vue({
    router:router,
    el:"#app"
    })

    八、子路由与子路由传参
    第一步、设置路由

    <router-link to="/home">首页</router-link>
    <router-link to="/user">用户</router-link>
    <!--子路由视图显示的地方-->
    <router-view></router-view>

    第二步、设置用户模板
    <template id="user">
    <div>
    <h2>
    这是一个用户的页面
    </h2>
    <router-link to="user/username">去子路由</router-link>
    <!--子路由视图显示的地方-->
    <router-view></router-view>
    </div>
    </template>
    第三步、定义必须的组件--Home ---User -- UserName
    var Home={
    template:'<div>这是一个首页的页面</div>'
    }
    var User={
    template:'#user'
    }
    var UserName={
    template:'<div>这是具体的用户</div>'
    }
    第三步、配置路由定义路由
    var rotues = [
    {path:"/home",component:Home},
    {
    path:"/user",componet:User,
    "children":[
    {//注意,子路由前面不加斜杠
    path:"username":component:UserName
    }
    ]
    },
    { path: '*', redirect: '/home' } /*路由的重定向*/
    ]
    第四步、实例化VueRouter
    var router = new VueRouter({
    routes:routes
    })
    第五步、挂载
    var vw = new Vue({
    router:router,
    el:"#app"
    })

    第六步、传参---配置动态子路由
    修改user的template
    <template id="user">
    <div>
    <h2>
    这是一个用户的页面
    </h2>
    <router-link to="/user/zhangsan/age/20">张三</router-link>
    <router-link to="/user/lisi/age/22">李四</router-link>
    <!--子路由视图显示的地方-->
    <router-view></router-view>
    </div>
    </template>
    在配置路由中修改用户的子路由
    'children':[ /*定义自组件的路由*/
    {
    path:':username',component:UserName,
    }
    ]
    修改组件UserName
    var UserName={
    template:'<div>这是具体的用户 {{$route.params.username}}</div>'
    }
    如果需要传递别的参数,比如说年龄

    <router-link to="/user/zhangsan/age/20">张三</router-link>
    <router-link to="/user/lisi/age/22">李四</router-link>
    'children':[ /*定义自组件的路由*/
    {
    path:':username/age/:age',component:UserName, 
    }
    ]
    var UserName={
    template:'<div>这是具体的用户 {{$route.params}}</div>'
    }

    命名路由
    在vue实例中的data数据无法绑定到新闻列表中
    data:{
    newsid:123
    }
    通过以下方式无法实现
    <router-link to="/newscontent/aid">去新闻详情</router-link>

    那么就需要給配置路由添加一个name属性

    var routes=[
    {path:'/home',name:'home',component:Home},
    {path:'/news',name:'news',component:News},
    {path:'/newscontent/:aid',name:'newscontent',component:NewsContent},
    { path: '*', redirect: '/home' } /*路由的重定向*/
    ]

    重新定义路由即可,可以传入参数
    <router-link :to="{name:'home'}">去首页</router-link>
    <router-link :to="{name:'news'}">去新闻</router-link>
    <router-link :to="{name:'newscontent',params:{aid:newsid}}">去新闻详情</router-link>
    十、多视图路由
    <!-- // 有时候想同时(同级)展示多个视图,而不是嵌套展示,例如创建一个布局,有 sidebar(侧导航) 和 main(主内容) 两个视图,这个时候命名视图就派上用场了。你可以在界面中拥有多个单独命名的视图,而不是只有一个单独的出口。如果 router-view 没有设置名字,那么默认为 default。-->
    在页面中每个页面中既添加头部,又添加内容区域,或者底部

    <router-view></router-view>
    <router-view name="page"></router-view>
    <router-view name="footer"></router-view>
    var routes=[
    
    {path:'/home',
    name:'home',
    components:{
    default:Header,
    page:Home,
    footer:HomeFooter
    }
    },
    { path:'/news',
    name:'news',
    components:{
    default:Header,
    page:News,
    footer:NewsFooter
    }
    },
    { path: '*', redirect: '/home' } /*路由的重定向*/
    ]
  • 相关阅读:
    Atitit 经济学常见的流派 古典主义与凯恩斯主义
    Atitit 学习方法 体系化学习方法 Excel 科目,分类,专业 三级分类。。 知识点。。 课程就是每一个知识点的详细化。。 比如经济学 类别 专业 xx概论知识点 3、金
    atiitt it学科体系化 体系树与知识点概念大总结.xlsx
    Atitit 减少财政支出普通人如何蹭政府补贴措施 attilax大总结.docx
    Atitit 信用管理概论 attilax学习心得
    Atitit.月度计划日程表 每月流程表v5
    Atitit 企业6大职能 attilax总结
    Atitit 常见每日流程日程日常工作.docx v8 ver ampm imp 签到 am y 天气情况检查 am y 晨会,每天或者隔天 am 每日计划(项目计划,日计划等。 am
    Atitit 财政赤字解决方案
    Atitit 建设自己的财政体系 attilax总结 1.1. 收入理论 2 1.2. 收入分类 2 1.3. 2 1.4. 非货币收入 2 1.5. 2 1.6. 降低期望 2 1.7.
  • 原文地址:https://www.cnblogs.com/shenjp/p/6561397.html
Copyright © 2011-2022 走看看