vue-router

最新推荐文章于 2021-09-20 01:30:02 发布

Xaire

最新推荐文章于 2021-09-20 01:30:02 发布

阅读量166

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/u012183426/article/details/82588896

版权

vue 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

vue-router 路由
ngRoute
①引入对应的angular-router.js 指定ngRoute
②ngView创建一个盛放代码片段的容器
③路由词典
app.config(function($routeProvider){
$routeProvider.when()
.otherwise
})
跳转： $location.path a href='#/myDetail'
传参： ①发送接收 ②配置接收方路由 /myDetail -->/myDetail/:id ③$routeParams

ui-router:支持代码片段的嵌套
①引入对应的js文件，ionic ['ui.router']
②uiView
③配置状态
$stateProvder.state()
$urlRouterProvider.otherwise
跳转：$state.go ui-sref a
传参：①发送接收 ②配置接收方状态对应的url ③$stateParams

vue-router
①引入对应的vue-router.js
②指定容器
<router-view></router-view>
③配置路由词典
3.1 定义一个对象数组
每一个对象包含两个属性：path component
var myRoutes=[{path:'',component:}]
3.2 创建VueRouter对象（路由词典）
var myRouter= new VueRouter({
routes:myRoutes=
})
3.3 在Vue的实例中，指定router属性为myRouter

跳转：
<router-link to='/myMain'></router-link>
this.$router.push('/myLogin')
a href='#/myLogin'

传参：
①发送、接受
②配置接收方的路由
③接受参数

从注册页面跳转到主页面并发送数据123：
①发送：register 接受：main
②配置main的路由
{path:'/myMain',com..}-->
{path:'/myMain/:id',com..}
③在组件生命周期钩子函数中读取传递过来的参数
mounted:function(){
var result= this.$route.params.id
}
④ href='#/myMain/123'
router-link to='/myMain/123'
this.$router.push('/myMain/123')

路由传参练习：
有两个组件，一个列表 list-component,一个详情detail-component；
列表中有3个列表项，点击列表项，可以跳转到详情，同时将列表的下标传递给详情，在详情页接受到数据，显示出来。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue template</title>
    <script src="../js/vue.js"></script>
    <script src="../js/vue-router.js"></script>
</head>
<body>
<div id="example">
        <router-view></router-view>
</div>

<script type="text/x-template" id="list-template">
    <div>
        <ul>
            <li v-for="(item,index) in dishList">
                <button @click="handleClick(index)">{{item}}</button>
            </li>
        </ul>
    </div>
</script>

<script type="text/javascript">

    var List = Vue.component('list-component',{
        template:'#list-template',
        data:function(){
            return {
                dishList:['item1','item2','item3']
            }
        },
        methods:{
            handleClick:function(index){
                //跳转到myDetail page
                this.$router.push('/myDetail/' + index);
            }
        }
    });
    var Detail = Vue.component('detail-component',{
        template:`<h1>received params is {{msg}}</h1>`,
        data:function(){
            return {
                msg:''
            }
        },
        mounted:function(){
            //用生命周期中的钩子函数获取来自发送方的数据，存放在msg变量中
            this.msg = this.$route.params.id;
        }
    });

    var myRoutes = [
        {
          path:'/',
          component:List
        },
        {
            path:'/myList',
            component:List
        },
        {
            path:'/myDetail/:id',
            component:Detail
        },
        {
            path:'*',
            component:List
        }
    ];

    var myRouter = new VueRouter({
        routes:myRoutes
    });
    new Vue({
            el: "#example",
            router:myRouter,
            data: {
                myValue: "test!"
            }
        }
    );
</script>
</body>
</html>

Xaire

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue-router

vue-router 路由ngRoute①引入对应的angular-router.js 指定ngRoute②ngView创建一个盛放代码片段的容器③路由词典app.config(function($routeProvider){$routeProvider.when().otherwise})跳转： $location.path a href='#/myDetail'传参： ①...
复制链接

扫一扫