Vue路由-基本使用

1.引入vue-router

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

2.定义路由组件

 const Login = {
   template: '<div>Login组件</div>'
 }
 const Register = {
   template: '<div>Register组件</div>'
 }

3.实例化路由对象 new VueRouter

// router 路由
// route 规则
const routerobj = new VueRouter({
  // 4. 配置路由的规则   
  routes: [
    {
      path: '/login',
      component: Login
    },
    {
      path: '/register',
      component: Register
    }
  ]
})

4.配置路由的规则（如上）
5.挂载路由

new Vue({
     el: "#app",
     // 5. 挂载路由  
     router:routerobj
   })

6.渲染路由

<div id="app">
   <a href="#/login">登录</a>
   <a href="#/register">注册</a>
   <!-- 6. 渲染路由  -->
   <router-view></router-view>
 </div>

Vue路由-路由高亮

1.引入vue-router （必须先引入vue.js，在引入vue-router.js，因为先有vue再有vue-router）

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

<script>
   // 2. 定义路由组件
   const Login = {
     template: '<div>Login组件</div>'
   }
   const Register = {
     template: '<div>Register组件</div>'
   }
   // 3. 实例化路由对象 new VueRouter   
   // router 路由
   // route 规则
   const router = new VueRouter({
     // 4. 配置路由的规则   
     routes: [
       {
         path: '/login',
         component: Login
       },
       {
         path: '/register',
         component: Register
       }
     ],
     linkActiveClass: 'active'
   })
   new Vue({
     el: "#app",
     // 5. 挂载路由  
     router
   })
 </script>

3.渲染

<div id="app">
   <!-- tag="div" 设置为指定的标签 默认为 a标签 -->
   <router-link to="/login" tag="div">登录</router-link>
   <router-link to="/register">注册</router-link>
   <!-- 6. 渲染路由  -->
   <router-view></router-view>
 </div>

4.样式

<style>
   .router-link-active {
     font-size: 50px;
     color: pink;
   }

   /* 模拟第三方 提供好的选中 样式 */
   .active {
     font-size: 50px;
     color: yellow;
   }
 </style>

vue路由-路由传参

<body>
 <div id="app">
   <!-- <a href="#/login">登录</a>
   <a href="#/register">注册</a> -->
   <!-- tag="div" 设置为指定的标签 默认为 a标签 -->
   <router-link to="/login?name=fly&age=18">登录</router-link>
   <router-link to="/register/zs/18">注册</router-link>
   <!-- 6. 渲染路由  -->
   <router-view></router-view>
 </div>
 <script>
   // 2. 定义路由组件
   const Login = {
     // template: '<div>Login组件---{{$route.query.name}}----{{$route.query.age}}</div>',
     template: '<div>Login组件---{{name}}----{{age}}</div>',
     // data() {
     //   return {
     //     name: this.$route.query.name,
     //     age: this.$route.query.age
     //   }
     // },
     data: () => ({
       name: '',
       age: ''
     }),
     created() {
       // console.log(this.$route.query.name)
       // console.log(this.$route.query.age)
       this.name = this.$route.query.name
       this.age = this.$route.query.age
     }
   }
   const Register = {
     props: ['name', 'age'],
     template: '<div>Register组件</div>',
     created() {
       console.log(this.name, this.age)
       console.log(this.$route.params.name)
       console.log(this.$route.params.age)
       // this.name = this.$route.query.name
       // this.age = this.$route.query.age
     }
   }
   // 3. 实例化路由对象 new VueRouter   
   // router 路由
   // route 规则
   const router = new VueRouter({
     // 4. 配置路由的规则   
     routes: [
       {
         path: '/login',
         component: Login
       },
       {
         path: '/register/:name/:age',
         component: Register,
         props: true
       }
     ],
     linkActiveClass: 'active'
   })
   new Vue({
     el: "#app",
     // 5. 挂载路由  
     router
   })
 </script>
</body>

编程式导航路由

<body>
 <div id="app">
   <button @click="goDetail">goDetail</button>
   <router-view></router-view>
 </div>
 <script>
   const Login = {
     template: '<div>Login组件</div>',
     created() {
       console.log(this.$route.query.name)
       console.log(this.$route.query.age)

       // console.log(this.$route.params.name)
       // console.log(this.$route.params.age)
     }
   }

   const router = new VueRouter({
     routes: [
       {
         path: '/login',
         component: Login
       },
       {
         name: 'login',
         path: '/login/:name/:age',
         component: Login
       }
     ],
     linkActiveClass: 'active'
   })
   //解决只能点击一次的报错，设置后可以多次点击
   const originalPush = VueRouter.prototype.push
   VueRouter.prototype.push = function push(location) {
     return originalPush.call(this, location).catch(err => err)
   }
   new Vue({
     el: "#app",
     router,
     methods: {
       goDetail() {
         // $route 参数使用
         // $router 路由调转
         // console.log(this.$router)
         // 字符串   用query
         // this.$router.push('/login')
         // this.$router.push('/login?name=fly&age=18')
         // this.$router.push('/login/fly/18')
         // 对象写法
         // this.$router.push({ path: '/login', query: { name: 'fly', age: 18 } })//用query
         this.$router.push({ name: 'login', params: { name: 'fly', age: 18 } })//用query

         // back

         // forware  

         // go  
       }
     }
   })
 </script>

嵌套路由

<body>
 <div id="app">
   <router-link to="/account">Account</router-link>
   <router-view></router-view>
 </div>
 <script>
   const Account = {
     template: `
       <div>
         <div>Account组件</div>
         <router-link to="/account/login">login</router-link>  
         <router-link to="/account/register">register</router-link>  
         <router-view></router-view>
       </div>
     `
   }
   const Login = {
     template: '<div>Login组件</div>'
   }
   const Register = {
     template: '<div>Register组件</div>'
   }
   // 3. 实例化路由对象 new VueRouter   
   // router 路由
   // route 规则
   const router = new VueRouter({
     // 4. 配置路由的规则   
     routes: [
       {
         path: '/',
         redirect: '/account/register'
       },
       {
         path: '/account',
         component: Account,
         children: [
           {
             path: '/account/login',
             component: Login
           },
           {
             path: '/account/register',
             component: Register
           }
         ]
       }
     ]
   })
   new Vue({
     el: "#app",
     // 5. 挂载路由  
     router
   })
 </script>
</body>