Vue+Vue-router主要用来做单页面应用(single Page Application)

1、前端路由实现原理

1、锚点(a标签)值监视

2、ajax获取动态数据

3、核心点是锚点值的改变

通过window.onhashchange事件来监控锚点值的改变

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>11-Vue-router的使用</title>
</head>
<body>
<a href="#/login">登陆页面</a>
<a href="#/register">注册页面</a>
<div id="app">
    <h1>主页</h1>
</div>

<script src="./node_modules/vue/dist/vue.js"></script>

<script type="application/javascript">
    var Odiv=document.getElementById("app");
    //onhashchange事件检测url上的锚点数据
    window.onhashchange=function () {
        switch (location.hash) {
            //根据不同的锚点值，对页面进行切换
            case "#/login":
                Odiv.innerHTML="<h1>登陆页面</h1>";
                break;
            case "#/register":
                Odiv.innerHTML="<h1>注册页面</h1>";
                break;
            default:
                break;
        }
    };
</script>
</body>
</html>

View Code

2、vue-router的基础使用

vue的核心插件，用router-link替换a标签，to属性相当于a标签的href属性。

router-view是路由组件的出口，即router中的component挂载的位置

1、安装，npm install vue-router --save

版本向下兼容的

2、引入vue-router.js，默认抛出VueRouter对象和两个全局组件router-link、router-view

3、全局使用VueRouter对象

4、让Vue使用VueRouter创建，Vue.use(VueRouter)

5、创建一个路由对象

6、在Vue中挂载router实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>12-Vue-router的使用</title>
</head>
<body>

<div id="app">
</div>

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

<script type="application/javascript">
    //主组件
    //router-link对应html的a标签，to对应a标签的href属性
    var App={
        template:`<div>
            <router-link to="/login">登陆页面</router-link>
            <router-link to="/register">注册页面</router-link>
            <router-view></router-view>
        </div>`
    };
    //登陆页面组件
    var Login={
        template:`<h1>登陆页面</h1>`
    };
    //注册页面组件
    var Register={
        template: `<h1>注册页面</h1>`
    };
    //告知Vue使用VueRouter组件
    Vue.use(VueRouter);
    //创建VueRouter实例
    var router=new VueRouter({
        routes:[
            {
                //路径对应的组件
                path:'/login',
                //组件将挂载到router-view的位置
                component:Login
            },
            {
                path:'/register',
                component: Register
            }
        ]
    });
    //创建Vue实例
    new Vue({
        el:"#app",
        components:{
            App
        },
        template:`<App/>`,
        //Vue中添加router属性
        router:router
    })
</script>
</body>
</html>

View Code

3、命名路由的使用

给路由添加name名称

渲染的时候用v-bind方法

4、路由参数

路由范式：

（1）、xxx.html#/user/1 params

（2）、xxx.html#/user?userId=1 query

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>13-路由参数</title>
</head>
<body>

<div id="app"></div>

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

<script type="application/javascript">
    var App={
        template:`<div>
            <router-link :to="{name:'userp',params:{userId:1}}">用户1</router-link>
            <router-link :to="{name:'userq',query:{userId:2}}">用户2</router-link>
            <router-view></router-view>
        </div>`,
        data(){
            return {}
        }
    };
    var UserParams={
        template:`<h3>我是用户1</h3>`,
        //在组件内获取路由信息
        created(){
            console.log(this.$route);
            //获取路由参数
            userId=this.$route.params.userId
            //可以做一些Ajax请求
        }
    };
    var UserQuery={
        template:`<h3>我是用户2</h3>`,
        created(){
            //query方式的参数
            userId=this.$route.query.userId
            //有参数后就可以做其他请求
        }
    };
    Vue.use(VueRouter);
    var router=new VueRouter({
        routes:[
            {
                //动态路由参数以冒号开头
                path:'/user/:userId',
                name:'userp',
                component:UserParams
            },
            {
                path:'/user',
                name:'userq',
                component:UserQuery
            }
        ]
    });
    new Vue({
        el:"#app",
        template:`<App/>`,
        components:{
            App
        },
        router,
        data(){
            return {}
        }
    })
</script>
</body>
</html>