vue路由的基本使用和传参

后端路由：所有的超链接都是url地址，所有的url地址都对应服务器上的资源
对于单页面应用程序来说，主要通过url中的hash(#号)来实现不同页面之间的切换，同时，哈希有一个特点，http不会请求包含hash相关的内容，所以单页面程序中的页面跳转主要用hash实现，锚点就是哈希
在单页面应用程序中，这种通过hash改变来切换页面的方法，称作前端路由

    <script src="./lib/vue.js"></script>
    <script src="./lib/vue-router.js"></script>

    <div id="app">
        <a href="#/login">登陆</a>        <!--注意要加#号-->
        <a href="#/register">注册</a>
        <a href="#/hello">hello</a>
        <br><br>
        <!--router-link默认渲染为一个a标签 可以用tag修改-->
        <router-link to="/login?id=11&name=nieweib" tag="span">登陆</router-link>
        <router-link to="/register">注册</router-link>
        <router-link to='/hello?age=18&name=nieweibo' tag='span'>hello</router-link>
        <!--在这是vue-router提供的元素，专门用来当作占位符-->
        <transition mode="out-in">
            <router-view> 

            </router-view>
        </transition>
    </div>

<script>
        //传参  用this.$route是一个对象  参数主要都在$route.query下
        var login = {
            template:  '<h1>login {{$route.query.id}} {{$route.query.name}}</h1>',
            created : {
                console.log(this.$route)  //是一个对象
            }
        }

        var register = {
            template: '<h1>注册</h1>'
        }
		
        var hello = {
	template: '<h1>hello world 我叫{{this.$route.query.name}},我今年{{$route.query.age}}<h1>'
	}
        /*
            1 创建一个路由对象， 当导入vue-router之后，在windows 全局对象中，就有了一个路由的构造函数叫做VueRouter 
            在new路由对象的时候，可以为构造函数传递一个配置对象
        */
	var routerObj = new VueRouter({
            /*
                每个路由规则都是一个对象，这个规则的对象必须有两个必须的属性
                属性1：path 表示监听哪个路由链接地址
                属性2：component，表示如果路由是前面匹配到的path，则展示component属性对应的组件
            */
            //注意：component的属性值必须是一个组件的模板对象 不能是组件的引用名称，而且不能加单双引号，redirece默认跳转的路径需要加引号，因为这是路径，不是插接的对象名
	    routes:[
			{path:'/',redirect:'/login'},
			{path:'/login',component:login},
			{path:'/register',component:register},
			{path:'/hello',component:hello},
	    ],
	})
        var vm = new Vue({
            el: '#app',
            data: {

            },
            methods: {
                
            },
            //将路由规则对象， 注册到vm实例上，用来舰艇URL地址的变化，然后展示对应的组件
            
            router: routerObj 
        })
    </script>

传参数的第二种方式

        <router-link to='/login/12/name'>
            登陆
        </router-link>
        var login = {
            template: '<h1>登陆 {{$route.params.id}} {{$route.params.name}}</h1>',
            data() {
                return {

                }
            },
            created() { //组件生命周期钩子函数
                console.log(this.$route.query.id)
            },
        }
        var router = new VueRouter({
            routes: [
                { path: '/login/:id/:name', component: login }, //冒号是占位符的意思,有多少参数就应该有多少占位符否则报错
            ]
        })

区别：第一种是$route.query.id 第二种是$route.params.id

vue路由的基本使用和传参

猜你喜欢