Vue中的路由

路由是Vue的核心插件（Vue.router.js）
路由的作用：可以根据不同的url路径访问不同的页面，可以创建单页面应用

<div id="app">
    <!--1.使用router-link组件导航，用to属性指定链接-->
    <router-link to="/home">Home</router-link>
    <router-link to="/user">分页</router-link>
    <!--盛放链接对应的内容-->
    <router-view></router-view>
</div>
<script src="js/vue.js"></script>
<script src="js/vue-router.js"></script><!--下载后连接的插件-->
<script>
    //2.创建组件（创建页面对应的内容）
    var Home = {
        template:`
            <p>首页</p>
        `
    }
    var User = {
        template:`
            <p>分页</p>
        `
    }

    //3.配置路由（组件配置对象）
    const name = [
        //第一行行为打开页面直接显示Home页面
        {path:'/',component:Home},
        {path:'/home',component:Home},
        {path:'/user',component:User}
    ]
    //4.创建一个路由实例，用传routes配置
    const names = new VueRouter({
        routes:name,
        //改变字体颜色，在style中
        linkActiveClass:'active'
    })
    //5.把路由挂到Vue实例上
    new Vue({
        el:'#app',
        router:names
    })
</script>

const为常量，与var不同，文章最后有讲解他们的不同

路由的嵌套

嵌套路由顾名思义就是路由的多层嵌套,

<div id="app">
    <!--1.使用router-link组件导航，用to属性指定链接-->
    <router-link to="/home">Home</router-link>
    <router-link to="/user">分页</router-link>
    <!--盛放链接对应的内容-->
    <router-view></router-view>
</div>
<script src="js/vue.js"></script>
<script src="js/vue-router.js"></script>
<script>
    //2.创建组件（创建页面对应的内容）
    var Home = {
        template:`
            <p>首页</p>
        `
    }
    var User = {
        template:`
        <div>
           <p>分页</p>
           <ul>
                <li>
                    <router-link to="/user/zhuce">注册</router-link>
                </li>
                <li>
                    <router-link to="/user/denglu">登录</router-link>
                </li>
           </ul>
           <router-view></router-view>
        </div>

        `
    }
    var Zhuce = {
        template:`
            <p>我是注册页</p>
        `
    }
    var Degnlu = {
        template:`
            <p>我是登录页</p>
        `
    }
    //3.配置路由（组件配置对象）
    const name = [
        {path:'/',component:Home},
        {path:'/home',component:Home},
        {path:'/user',
         component:User,
         children:[
             {path:'zhuce',component:Zhuce},
             {path:'denglu',component:Degnlu}
         ]
        }
    ]
    //4.创建一个路由实例，用传routes配置
    const names = new VueRouter({
        routes:name,
        //改变字体颜色，在style中
        linkActiveClass:'active'
    })
    //5.把路由挂到Vue实例上
    new Vue({
        el:'#app',
        router:names
    })
</script>

以“/”开头的嵌套路径会被当作根路径，所以子路由上不用加“/”;

Image 1.png

var、let、const的区别

var：Es5、无块级作用域、变量有声明提升的特性、可重复声明变量
let：Es6、有块级作用域、变量没有声明变量的特性、不能重复声明变量
const：声明常量，一旦声明，就不可以改变，除了对象类型可以改变他的属性