vue简学之路（案例十三）路由一级配置以及路由重定向

~~vue中路由的作用：~~
根据url锚点路径，在容器中加载不同的模块，本质就是页面导航
在单页面的情况下更好的前后端分离，对于用户来说如果有路由会路径会根据路由去分配，并且页面不会重新加载，因此页面更为流畅。但是他缺点在于没有多个页面给搜索引擎网页爬虫爬取，由于他会一次性加载html javascript css在初次加载的时候会慢。

~~vue路由引入：~~
1通过npm install vue-router安装（一般在项目搭建时候就会安装）我用到是这个方式
2官网下载引入

~~配置一级路由~~ 步骤

1 定义路由组件（可以以引入的形式）
const Home ={template:"<.h2>首页"}
const news ={template:”<.h2>新闻”}
const Hot ={template:“<.h2>热点”}

2分配路径
ocnst routes=[
{path:’/home’,component:Home},
{path:’/news’,component:News},
…
]

3 注册到router实例（创建router实例，传入‘routes’配置）
const router =new VueRouter({
routes //缩写相当于 routes:routes
})

4挂载到vue的根实例,让整个应用都具有路由的功能
var vm=new Vue（{
el: ,
router:router
}）
下面演示代码
这是没有进行优化的普通写法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>一级路由的配置，并将路由匹配到组件</title>
    <script src="vue.js"></script>
    <script src="node_modules/vue-router/dist/vue-router.js"></script>
</head>
<style>
    li{
        display: inline-block;
        list-style-type: none;
    }
    .show{
        width: 300px;
        height: 300px;
        background: #cccccc;
    }
</style>
<body>
<h4>
    在这里实现点击切换组件,演示通过路由进行渲染
</h4>
<div id="box">
    <ul>
<!--        通过路由跳转不再是使用a href-->
        <li><router-link to="/home">首页</router-link></li>
        <li><router-link to="/news">新闻</router-link></li>
        <li><router-link to="/hot">热点</router-link></li>
    </ul>
    <div class="show">
    <router-view></router-view>
</div>

  <button @click="back" style="background: #cccccc">go back</button>
</div>
<script>
    var vm = new Vue({
        el:"#box",
        // 挂载到vue,实例化VueRouter路由对象
        router:new VueRouter({
            // 路径对应的组件信息
            routes:[
                {
                    path:'/home',component:{
                        template:"<h1>首页</h1>"
                    }
                },
                {
                    path:'/news',component:{
                        template:"<h1>新闻</h1>"
                    }
                },
                {
                    path:'/hot',component:{
                        template:"<h1>热点</h1>"
                    }
                },
            ]
        })
    })
</script>
</body>
</html>

进行优化后写法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>一级路由的配置，并将路由匹配到组件</title>
    <script src="vue.js"></script>
    <script src="node_modules/vue-router/dist/vue-router.js"></script>
</head>
<style>
    li{
        display: inline-block;
        list-style-type: none;
    }
    .show{
        width: 300px;
        height: 300px;
        background: #cccccc;
    }
</style>
<body>
<h4>
    在这里实现点击切换组件,演示通过路由进行渲染
</h4>
<div id="box">
    <ul>
<!--        通过路由跳转不再是使用a href-->
        <li><router-link to="/home">首页</router-link></li>
        <li><router-link to="/news">新闻</router-link></li>
        <li><router-link to="/hot">热点</router-link></li>
    </ul>
</div>
<div class="show">
    <router-view></router-view>
</div>
<script>
    // 1定义三个组件
    const Home ={template:"<h1>首页</h1>"}
    const News ={template:"<h1>新闻</h1>"}
    const Hot ={template:"<h1>热点</h1>"}
    // 写法二
    // Vue.extend({template:"<h1>首页</h1>"})

    // 2配置路径信息
    const arr=[
        {
            path:"/home",
            component:Home
        },
        {
            path:"/news",
            component:News
        },
        {
            path:"/hot",
            component:Hot
        },
    ]

    /3创建router实例
    const router=new VueRouter({
        routes:arr
    })
    //4挂载到Vue
    var vm = new Vue({
        el:"#box",
        router:router
        //进行跳转，刷新后跳转回默认页面
         beforeCreate:function () {
            // 通过$router对象去访问地址
            this.$router.push("/home")
        },
        methods:{
        //返回上页
            back(){
                //console.log("efrefa")
                this.$router.go(-1)
            }

        }
    })
     // 普通写法刷新后重定向跳转回首页
    // router.push("/home")
</script>
</body>
</html>

效果
在点击后会通过路由方式进行跳转，上面的home news hot 会改变
在这里插入图片描述
并且在图中通过标签可将组件的内容渲染到页面分别显示首页新闻热点