普歌智音团队--vue-router的基本原理以及相关使用

普歌智音团队–vue-router的基本原理以及相关使用

vue-router的基本原理:
router的本意为路由的意思,在vue项目中具体使用时,即显示为点击按钮或相应内容自动跳转到另一个页面去显示该页面的内容

点击蓝色字体显示该页面内容一:vue-router的安装
使用vue-cli配置脚手架,选择y后自动安装vue-router;
使用npm命令时,输入cnpm i vue-router -D
二:创建组件
在用vue-cli配置成功后,在src文件夹下会出现一个router文件夹,在router中会出现index.js

三:router-link和router-view的使用
①router-link:用于显示切换页面
②router-view:用于组件渲染到哪个页面
注:router-link有一个to属性：表示导航路径，要填写的是你在router/index.js文件里配置的path值，如果要导航到默认首页，只需要写成 to="/"

四.创建路由组件和配置相应的映射关系

//创建路由组件
import  User from '../components/users/User.vue'
//配置映射关系
const routes=[ 
   path:{ path: '/users', component: User },
]
const router=new VueRouter({ 
//使用history之后,搜索网页之后没有#号  
mode: 'history',
routes})

五.重定向
由于点击router-link里面的内容,首先网址出现的是’ / ',如果想要直接跳转到指定网页,可以使用redirect进行重定向,直接跳转;

import Login from '../components/Login.vue'
const routes = [               
//redirect重定向        
{path:'/',redirect:'/login'},