vue中创建spa项目时关于路由router的一些应用

使用此方法需要先安装vue-router

使用方法

1.在自己新建的文件index.js文件里配置路由，并暴露

2.在main.js文件对接接口文件，

3.新建一个组件，因为该组件已经在配置文件被配置了，

4.告诉文件在哪里显示，在App.vue利用router-view（2020-8-18 9：29）标签确定显示位置。（子组件在父组件里显示都需要这一步，例如二级组件，就需要在一级组件里写明）

//（使用插件9:20）

main.js为入口文件，自己创建的index.js为配置路由的文件。

安装cnpm install vue-router -S or yarn add vue-router

在src下面创建一个新文件夹，router 然后在创建新文件index.js（自己创建的配置路由的文件），在该文件引入vue-router

1.引入vue-router，如果是在脚手架中，引入VueRouter之后，需要通过Vue.use来注册插件， 在vue--->教程--->插件.

创建实例，必须用routes

index.js

	import Vue from 'vue'//
    import Router from 'vue-router'
    Vue.use(Router)//需要通过Vue,use 方法去使用插件
    
    
    
    const routes = []
     //创建Router的实例对象
    const router = new Router({
    	mode:"hash"，
        routes
    })

    // 向外暴露
    export default router

写好配置路由以后，下面写index.js配置文件

//引入router
import Vue from 'vue'
import Router from 'vue-router'
//需要通过Vue.use方法来去使用插件
Vue.use(Router)


const routes =[]

//创建Router的实例对象
const router = new Router({
    routes
})

export default router

在主入口文件加载执行（main.js文件）在该文件上引用router实例，import router from "./router" 然后在主入口文件引入router（目的？让我们的组件上面可以访问到路由相关的api($route/$router)）

import Vue from 'vue'
import App from './App.vue'
//引入router的实例
import router from "./router"
Vue.config.productionTip = false

new Vue({
  render: h => h(App),
  router  //目的？让我们的组件上面可以访问到路由相关的api($route/$router)
}).$mount('#app')

2.创建router路由器（上面已做好）

new Router({
      routes:[
        {path:"/home",component:Home}
      ]
    })

3.创建路由表并配置在路由器中（上面已做好）

var routes = [
        {path,component}//path为路径，component为路径对应的路由组件
    ]

    new Router({
        routes
    })

4.在根实例里注入router,目的是为了让所有的组件里都能通过this.$router、this.$route来使用路由的相关功能api （上面已做好）

 new Vue({   
      el: '#app',
      router,
      template: '<App/>',
      components: { App }
    })

新建文件夹views，在该文件夹下建立各个组件的文件，先创建第一个文件Films文件，建立文件以后就需要配置路由了（在index.js文件里）

引入文件，路径和属性（不能随便写）

​ path:"/films", //url地址栏的路径​ component:Films, //根据url地址栏的路径所映射的路由视图组件

此时Films文件不会显示在页面上，原因是因为还没告诉他应该在什么位置显示

此时需要在App.vue文件写上标签 router-view（作用是来指定路由切换的位置）

5.利用router-view来指定路由切换的位置

在App.vue文件上加上router-view标签

import Films from "@/views/Films"  //引入文件


constrouter= {
    {
            path:"/films",    //url地址栏的路径
            component:Films,   //根据url地址栏的路径所映射的路由视图组件
    }
  }

上面就完成了一级路由的构成

二级路由：
1.先在配置文件index.js上的一级路由上配置上二级路由

2.新建文件夹和文件，选择在哪个文件上显示二级组件内容的地方加上标签router-view使他能确定在什么位置显示。

默认路由
当我们进入应用，默认像显示某一个路由组件，或者当我们进入某一级路由组件的时候想默认显示其某一个子路由组件，我们可以配置默认路由：

{path:'',component:Main}
当我们需要进入之后进行重定向到其他路由的时候，或者当url与路由表不匹配的时候：

通配符，斜杠 ，空这些情况下都是用redirect，跳转组件时候用component

{path:'/',redirect:'/main'}
//...放在最下面
{path:'*',redirect:'/main'},
页面之间的相互跳转router-link
router-link标签（第二个核心标签）------------这种是声明式导航

可以实现页面的跳转，在解析时会直接解析成a标签。里面还需要to去转接的地址，相当于a标签的href 还有一个就是tag 表示以什么方式呈现，如tag="li"表示以li标签的形式呈现，active-class="active"是动态的添加class名。如 电影

具名路由
为了解决在以引用路径出错，可以给路由起个名字， name:"now",

 {
            name:"now",
            path:"/films",    //url地址栏的路径
            component:Films,   //根据url地址栏的路径所映射的路由视图组件    
  }

在其他路由文件采用对象的方式引用。

         <router-link :to="{
            name:'now'
        }">正在热映</router-link>
编程式导航跳转
		<ul>
            <li @click="toDetail">点击进入详情页面</li>
        </ul>
声明式跳转方式
		<ul>
           <router-link to="/detail"></router-link> 
        </ul>

都需要在配置文件里配置

在组件中，加上replace标签，浏览器不会记录，后退时会直接跳过含有该标签的组件