Vue-Router

Vue-Router实现前端路由，用来实现SPA页面非常容易

1.可以使用CDN引入，也可以直接安装它

npm install vue-router --save

 

2.然后可以对它进行配置、

　　创建一个index.js文件，先将vue-router引入

 

　　import VueRouter from "vue-router"

 

　　然后，我们需要将它注册，所以还得将vue引入

　　import Vue from "vue"

 

　　再通过use方法将它注册　

　　Vue.use(VueRouter)

 

　　我们注册了两个组件About.vue和Home.vue

　　

　　开始配置路由，我们要实例化一个路由　

　　const routes = [

    　　{

       　　 path:'/Home',

        　　component:Home

   　　 },

    　　{

        　　path:'/About',

        　　component:About

   　　 }

　　]

　　const router = new VueRouter({

   　　 routes,

    　　mode:history

　　})

　　routes是路由的映射，是一个数组，数组的每一项由一个对象组成，对象中可配置访问的路径，以及对应的组件

　　//重定向：redirect，别名：alias

 

　　到这里，我们差最后一步，将router挂在到Vue实例上

　　在入口文件main.js中，将index.js文件引入进来，然后挂载在vue实例中

　　import Router from './router/index'

　　new Vue({

 　　 render: h => h(App),

  　　router:Router

　　}).$mount('#app')

 

 

3.使用router-link实现路由跳转

　　可以使用 <router-link to='/home'></router-link> 标签设置路由的跳转,其中to指向的是跳转的路径

　　<router-view/>可用于呈现组件的内容，两者相互配合实现spa单页面程序

 

　　使用router-link标签默认被替换为a标签来使用，那么，我们如果想要使用别的标签怎么办？

　　1.使用tag属性

　　router-link中有一个tag属性，可以给它指定被替换成那种标签，比如：<router-link to='/home' tag='button'></router-link>,在页面中，它将是一个按钮

　　2.通过事件处理

　　this.$router.push("home");

　　//这里发现一个问题，如果当前页面是要push的页面，浏览器会报一个错

　　

　　//使用push相当于往栈中压入了一个新元素，所以可以后退前进，而使用replace相当于替换则不能后退会前进

 

4.参数问题

　　可以给路由设置参数：

　　

　　{

       　　 path:'/Home/:id',

       　　 component:Home

    　},

　　

　　那我们跳转时也要附带参数，不然找不到该路径：

　　

　　<router-link :to="'/home/'+ msg">home</router-link>　　

　　

　　然后，我们可以使用params来拿到当前页面url中的参数，通过：

　　

　　this.$route.params.id       //注意，这里的route表示当前哪个路由处于在活跃状态就拿到哪个路由，和上面的router不一样，router是我们实例化出来的路由。